toDataURL();不保存图像？答案

【问题标题】：toDataURL(); not saving image?toDataURL();不保存图像？
【发布时间】：2015-11-16 11:32:14
【问题描述】：

我在使用 toDataURL(); 方法时遇到问题。我正在尝试保存画布的图像，以便在调整浏览器/画布的大小时，它可以再次出现在画布的背面（作为一种解决方法，因为每当您设置画布的宽度时，它都会清除它）然后继续我写的“绘图”功能，但在不同大小的画布上。这样，我似乎可以在不清除画布的情况下无缝调整画布大小。

在我的代码中，toDataURL(); 似乎没有保存图像，或者我在调整画布大小时将其调用错误。我检查了只是将源设置为普通的 .png 文件，并且它似乎在后面正确绘制。发现之前有人问过这个问题，但是找不到满意的答案……

  canvas.onmousemove = draw;
       var ctx = canvas.getContext('2d');
       var video = document.createElement("video");
       video.setAttribute("src", "some_video.mp4");
       video.autoplay = true;
       var img2 = new Image;
       img2.src = "some_image.png";
       var dataURL = canvas.toDataURL();
       ctx.canvas.width = window.innerWidth;
       ctx.canvas.height = window.innerHeight;

  function draw(e){
            var rect = canvas.getBoundingClientRect();
           var x = e.clientX-rect.left-img2.width/2;
           var y = e.clientY-rect.top-img2.height/2;
           ctx.drawImage(video, x, y, 830, 644);
           ctx.drawImage(img2, x, y, img2.width, img2.height);
  }

   $(window).resize(function(){
            var image = new Image;
            image.src = dataURL; 
            ctx.canvas.width = window.innerWidth;
            ctx.canvas.height = window.innerHeight;
            ctx.drawImage(image, 0, 0);
            draw();
        });

【问题讨论】：

您的问题已被多次询问和回答，所以我很惊讶您找不到任何以前的帖子。在尝试drawImage 之前，您需要等待图像加载。此外，您的 var dataURL 似乎在画布之前捕获了画布。
因为当你调用toDataURL()方法时，画布上什么都没有。在图像被绘制到画布后调用它。
@Leo。这也是我在评论中所说的。 :-)

标签： javascript jquery canvas

【解决方案1】：

我不确定您打算如何处理剪裁的内容，因为如果调整大小减小，您的代码将转储所有低于新画布分辨率和右侧的像素。所以我认为你没有考虑清楚。

您需要做的是让画布远离屏幕，设置为您想要的分辨率。然后将显示画布用作您渲染的视图和鼠标输入的事件目标，并在屏幕外画布上执行所有绘制功能。这样你就可以调整你想要的所有大小，而不必使用 toDataURL（它不适合这种类型的使用，因为 resize 事件可以每秒触发多次，并且 toDataURL 编码和解码不会跟上）

创建离屏画布

var can = document.createElement("canvas");
can.width = width;
can.height = height;
ctx = can.getContext("2d");

每当您更新屏幕外的画布或调整窗口大小时，将其渲染到屏幕上的画布。

scrCtx.drawImage(can,0,0); //scrCtx is the on screen ctx

您还可以获得额外的好处，即能够在不影响背景图像质量的情况下缩放、平移和旋转视图。它很快。 toDataURL 旨在通过网络和存储设备传输数据，而不是作为 ram 缓冲区。

【讨论】：