[英]Why saving canvas as jpeg or pdf result black image?
我有以下代码:
var imgData;
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
};
imgData = canvas.toDataURL("image/jpeg", 1.0);
imageObj.src = 'http://images.visitcanberra.com.au/images/canberra_hero_image.jpg';
当用户单击JPG或PDF文件时,将下载。 有以下用于下载JPG的代码:
function saveAsJPG(){
var pom = document.createElement('a');
pom.setAttribute('href', imgData);
pom.setAttribute('download', 'img.jpg');
if (document.createEvent) {
var event = document.createEvent('MouseEvents');
event.initEvent('click', true, true);
pom.dispatchEvent(event);
} else {
pom.click();
}
}
以下是PDF的代码:
function saveAsPDF(){
var pdf = new jsPDF();
pdf.addImage(imgData, 'JPEG', 0, 0);
pdf.save("download.pdf");
}
代码工作“正确”,预期问题是它不下载图像而是黑屏。 有一个正在运行的JSFiddle示例: https ://jsfiddle.net/1c1o8wjx/
您能帮我了解为什么它无法正常工作的可能原因吗?
您必须等待图像加载后才能调用canvas.toDataURL("image/jpeg", 1.0);
。 请尝试以下操作:
var imgData;
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
imgData = canvas.toDataURL("image/jpeg", 1.0);
};
imageObj.src = 'http://images.visitcanberra.com.au/images/canberra_hero_image.jpg';
由于存在安全错误(图像属于其他域),因此无法正常工作。 在您的网页中尝试。
您正在从与网页域不同的域中加载气球城市图像。 出于安全原因,此“跨域”图像绘制将导致浏览器“污染”画布。 受污染的画布不允许使用.toDataURL
导出其内容。
这张画布上的“跨域”绘图是为什么您得到一个全黑文件的原因...#myCanvas实际上并未创建您的dataURL,因为浏览器不允许使用它。
解决方法是将图像托管在与网页相同的域中。 然后,浏览器将允许canvas.toDataURL
并且您的图像将按原样显示。
示例代码和演示:
var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; var imgData; var img=new Image(); img.crossOrigin='anonymous'; img.onload=start; img.src="https://dl.dropboxusercontent.com/u/139992952/multple/canberra_hero_image.jpg"; function start(){ canvas.width=img.width; canvas.height=img.height; ctx.drawImage(img,0,0); imgData=canvas.toDataURL('image/jpeg',1.0); $('#printJPG').on('click',saveAsJPG); } function saveAsJPG(){ var pom = document.createElement('a'); pom.setAttribute('href', imgData); pom.setAttribute('download', 'img.jpg'); if (document.createEvent) { var event = document.createEvent('MouseEvents'); event.initEvent('click', true, true); pom.dispatchEvent(event); } else { pom.click(); } }
body{ background-color: ivory; } #canvas{border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <ul> <li><a href="#" id="printJPG">Print as JPG</a></li> </ul> <canvas id="canvas" width=300 height=300></canvas>
另请注意,Internet Explorer当前不支持“下载”属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.