2016-05-16 68 views
1

我想我的HTML画布导出为PDF和下载它,我做了一些搜索和下面的脚本正常工作与我:转换帆布为PDF格式:黑色背景

<script language = "JAVASCRIPT"> 
var canvas = document.getElementById('mycanvas'); 

var context = canvas.getContext('2d'); 

// draw a blue cloud 
context.beginPath(); 
context.moveTo(170, 80); 
context.bezierCurveTo(130, 100, 130, 150, 230, 150); 
context.bezierCurveTo(250, 180, 320, 180, 340, 150); 
context.bezierCurveTo(420, 150, 420, 120, 390, 100); 
context.bezierCurveTo(430, 40, 370, 30, 340, 50); 
context.bezierCurveTo(320, 5, 250, 20, 250, 50); 
context.bezierCurveTo(200, 5, 150, 20, 170, 80); 
context.closePath(); 
context.lineWidth = 5; 
context.fillStyle = '#8ED6FF'; 
context.fill(); 
context.strokeStyle = '#0000ff'; 
context.stroke(); 

download.addEventListener("click", function() { 
// only jpeg is supported by jsPDF 
var imgData = canvas.toDataURL("image/jpeg", 1.0); 
var pdf = new jsPDF(); 

pdf.addImage(imgData, 'JPEG', 0, 0); 
var download = document.getElementById('download'); 

pdf.save("download.pdf"); 
}, false); 
</script> 

但我得到我的画布与黑色背景!

我已经尝试过其他的代码和许多解决方案,我在互联网上找到,我试图改变canvas标签的背景颜色,什么事也没有工作..

任何帮助吗?

回答

0

,而无需下载作为JPEG的,尝试下载一个PNG

download.addEventListener("click", function() { 
// only jpeg is supported by jsPDF 
var imgData = canvas.toDataURL("image/png", 1.0); 
var pdf = new jsPDF(); 

pdf.addImage(imgData, 'PNG', 0, 0); 
var download = document.getElementById('download'); 

pdf.save("download.pdf"); 
}, false); 
+0

jsPDF不支持PNG。 – Insaf