toDataURL(）;不保存图像

toDataURL(); not saving image?

本文关键字：保存 图像 toDataURL      更新时间：2023-09-26

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

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

你需要做的是让画布远离屏幕，设置为你想要的分辨率。然后将显示画布用作渲染到的视图和鼠标输入的事件目标，并在屏幕外画布上绘制所有函数。这样你就可以调整你想要的所有大小，而不必使用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缓冲区。

相关文章：