有什么方法可以克隆 HTML5 画布元素及其内容? [英] Any way to clone HTML5 canvas element with its content?

查看:20
本文介绍了有什么方法可以克隆 HTML5 画布元素及其内容?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

有没有办法创建一个包含所有绘制内容的画布元素的深层副本?

Is there any way to create a deep copy of a canvas element with all drawn content?

推荐答案

其实复制画布数据的正确方法是将旧画布传递给新的空白画布.试试这个功能.

Actually the correct way to copy the canvas data is to pass the old canvas to the new blank canvas. Try this function.

function cloneCanvas(oldCanvas) {

    //create a new canvas
    var newCanvas = document.createElement('canvas');
    var context = newCanvas.getContext('2d');

    //set dimensions
    newCanvas.width = oldCanvas.width;
    newCanvas.height = oldCanvas.height;

    //apply the old canvas to the new one
    context.drawImage(oldCanvas, 0, 0);

    //return the new canvas
    return newCanvas;
}

使用 getImageData 是用于像素数据访问,而不是用于复制画布.在浏览器上使用它进行复制非常缓慢且困难.应该避免.

Using getImageData is for pixel data access, not for copying canvases. Copying with it is very slow and hard on the browser. It should be avoided.

这篇关于有什么方法可以克隆 HTML5 画布元素及其内容?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆