Question

我使用此代码在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次），然后是正确的结果。我怎么才能只点击一次？谢谢。

Answer 1

这是因为您第一次点击时，锚没有图像数据网址...您可以设置网址并忘记点击事件。

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

OR

  $("#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：在saveImage函数

中，我看不到你对图像的画布感觉...

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

1 个答案: