从画布保存图像时缺少图像答案

【问题标题】：Missing image when saving image from canvas从画布保存图像时缺少图像
【发布时间】：2015-06-03 07:54:16
【问题描述】：

我使用这段代码在 Javascript 中保存图像：

function saveImage() {
    var canvas = document.getElementById('myPicture');
    var ctx = canvas.getContext('2d');
    var img = new Image();
    ctx.rect(0, 0, 460, 600);
    ctx.fillStyle = 'white';
    img = new Image();
    img.crossOrigin = 'anonymous';
    img.src = "http://localhost/upload/abc.jpg";
    ctx.drawImage(img,0,0,_item.width(),_item.height());
    return canvas.toDataURL("image/jpeg");
}

当我点击按钮保存图片时：

$("#save").on('click', function () {
    var rawImageData = saveImage();
    $(this).attr('download', 'your_pic_name.jpeg').attr('href', rawImageData);
});

但是我得到的结果是白色图像。 然后我再次单击保存按钮（即 2 次）然后是正确的结果。我怎样才能只点击一次？谢谢。

【问题讨论】：

奇怪...你打电话给saveImage()，你显然希望它神秘地返回一些rawImageData。然而，你的函数 saveImage 没有返回任何东西......除此之外，你使用了两次 new Image()。
我的代码丢失了，我已经添加了
嗯...the result I get is white image??您正在（可能）白色画布上绘制一个白色矩形？这就像在白地上有一面白鹰的旗帜
我想要的结果是一张包含url图片的图片，白色也是背景
我还是不明白你的 saveImage 函数中img 变量的含义。它无处使用，与画布无关......

标签： javascript jquery image canvas

【解决方案1】：

是因为第一次点击，anchor没有图片数据url...你可以设置url，忘记点击事件。

  //$("#save").on('click', function () {
    var rawImageData = saveImage();
   $(this).attr('download', 'your_pic_name.jpeg')
          .attr('href', rawImageData);
  //});

或

  $("#save").on('click', function () {
    var rawImageData = saveImage();
   /*$(this).attr('download', 'your_pic_name.jpeg')
          .attr('href', rawImageData);*/
        window.location=rawImageData;
  });

或者，您需要this file 才能使用以下代码

   var canvas = document.getElementById('myPicture');
 function saveImage() {
   var ctx = canvas.getContext('2d');
   var img = new Image();
   ctx.rect(0, 0, 460, 600);
   ctx.fillStyle = 'white';
   img = new Image();
   img.crossOrigin = 'anonymous';
   img.src = "http://localhost/upload/abc.jpg";
   //  ctx.fill...
   return canvas.toDataURL("image/jpeg");
}
  $("#save").on('click', function () {
    var rawImageData = saveImage();
    var png= Canvas2Image.saveAsPNG(canvas , true);
  });

PS：我看不出你觉得画布在哪里... in the saveImage function

【讨论】：