toDataURL()；不保存映像？

Question

我对toDataURL();方法有问题。我正在尝试保存画布的图像，以便当我调整浏览器/画布的大小时，它可以再次出现在画布的背面(因为无论何时设置画布的宽度，它都会清除它)，然后继续我编写的“绘制”函数，但在不同大小的画布上。这样，我似乎可以无缝地调整画布的大小，而不需要清理它。

在我的代码中，toDataURL();似乎不是在保存图像，也可能是我在调整画布的大小时说错了。我只是将源代码设置为一个普通的.png文件进行了检查，这似乎在后面画得很好。我以前问过这个问题，但我找不到满意的答案.

JS

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

Answer 1

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

您需要做的是保持画布远离屏幕，设置为您想要的分辨率。然后使用显示画布作为呈现的视图和鼠标输入的事件目标，并在屏幕外画布上绘制所有函数。通过这种方式，您可以随意调整大小，而不必使用toDataURL (因为调整大小事件可能会多次触发，而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缓冲区。