如何在本地将一个画布的内容复制到另一画布

发布于 2024-10-07 13:19:19 字数 690 浏览 2 评论 0原文

我想复制一个画布的所有内容并将它们全部传输到客户端的另一画布上。我认为我会使用 canvas.toDataURL() 和 context.drawImage() 方法来实现此目的，但我遇到了一些问题。

我的解决方案是获取 Canvas.toDataURL() 并将其存储在 Javascript 中的 Image 对象中，然后使用 context.drawImage() 方法将其放回原处。

但是，我相信 toDataURL 方法会返回一个 64 位编码标记，并在其前面添加 "data:image/png;base64," 。这似乎不是一个有效的标签（我总是可以使用一些正则表达式来删除它），但它是 "data:image/png;base64," 子字符串 a 之后的 64 位编码字符串有效图像？我可以说 image.src=iVBORw...ASSDAS 并将其绘制回画布上吗？

我查看了一些相关问题：使用以下命令将画布图像从一个画布显示到另一画布base64

但解决方案似乎不正确。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

世界等同你 2024-10-14 13:19:19

实际上您根本不必创建图像。 drawImage() 将接受 Canvas 以及 Image 对象。

//grab the context from your destination canvas
var destCtx = destinationCanvas.getContext('2d');
    
//call its drawImage() function passing it the source canvas directly
destCtx.drawImage(sourceCanvas, 0, 0);

比使用 ImageData 对象或 Image 元素快得多。

请注意，sourceCanvas 可以是 HTMLImageElement、HTMLVideoElement 或 HTMLCanvasElement。正如 Dave 在此答案下面的评论中提到的，您不能使用画布绘图上下文作为源。如果您有一个画布绘图上下文，而不是创建它的画布元素，则在上下文中的 context.canvas 下会有对原始画布元素的引用。

这里有一个 jsPerf 来演示为什么这是克隆画布的唯一正确方法： http://jsperf .com/copying-a-canvas-element

Actually you don't have to create an image at all. drawImage() will accept a Canvas as well as an Image object.

//grab the context from your destination canvas
var destCtx = destinationCanvas.getContext('2d');
    
//call its drawImage() function passing it the source canvas directly
destCtx.drawImage(sourceCanvas, 0, 0);

Way faster than using an ImageData object or Image element.

Note that sourceCanvas can be a HTMLImageElement, HTMLVideoElement, or a HTMLCanvasElement. As mentioned by Dave in a comment below this answer, you cannot use a canvas drawing context as your source. If you have a canvas drawing context instead of the canvas element it was created from, there is a reference to the original canvas element on the context under context.canvas.

Here is a jsPerf to demonstrate why this is the only right way to clone a canvas: http://jsperf.com/copying-a-canvas-element

回复收藏 0 原文

爱*していゐ 2024-10-14 13:19:19

@robert-hurst 有一个更干净的方法。

但是，当您在复制后确实想要获得 Data Url 的副本时，也可以使用此解决方案。例如，当您正在构建一个使用大量图像/画布操作的网站时。

    // select canvas elements
    var sourceCanvas = document.getElementById("some-unique-id");
    var destCanvas = document.getElementsByClassName("some-class-selector")[0];

    //copy canvas by DataUrl
    var sourceImageData = sourceCanvas.toDataURL("image/png");
    var destCanvasContext = destCanvas.getContext('2d');

    var destinationImage = new Image;
    destinationImage.onload = function(){
      destCanvasContext.drawImage(destinationImage,0,0);
    };
    destinationImage.src = sourceImageData;

@robert-hurst has a cleaner approach.

However, this solution may also be used, in places when you actually want to have a copy of Data Url after copying. For example, when you are building a website that uses lots of image/canvas operations.

    // select canvas elements
    var sourceCanvas = document.getElementById("some-unique-id");
    var destCanvas = document.getElementsByClassName("some-class-selector")[0];

    //copy canvas by DataUrl
    var sourceImageData = sourceCanvas.toDataURL("image/png");
    var destCanvasContext = destCanvas.getContext('2d');

    var destinationImage = new Image;
    destinationImage.onload = function(){
      destCanvasContext.drawImage(destinationImage,0,0);
    };
    destinationImage.src = sourceImageData;

回复收藏 0 原文

~没有更多了~