为什么将 canvas 保存为 jpeg 或 pdf 结果为黑色图像？

Question

我有以下代码：

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");
      }

代码有效 "correct" 预计会出现不下载图像但黑屏的问题。有有效的 JSFiddle 示例：https://jsfiddle.net/1c1o8wjx/

你能帮我理解它没有按预期工作的可能原因吗？

Answer 1

调用 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';

由于安全错误（图像属于不同的域），它在 fiddle 中不起作用。在您的网页中尝试。

Answer 2

您正在从不同于网页域的域加载气球城市图像。出于安全原因，此 "cross-domain" 图像绘制将导致浏览器 "taint" canvas。被污染的 canvas 不允许使用 .toDataURL 导出他们的内容。

这个 "cross-domain" 绘制到 canvas 是你得到一个全黑文件的原因...#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 当前不支持 "download" 属性。

为什么将 canvas 保存为 jpeg 或 pdf 结果为黑色图像？

Why saving canvas as jpeg or pdf result black image?

javascript

pdf

canvas

html5-canvas