将多个HTML5分层画布复制到JavaScript中的一个图像

时间:2015-05-15 17:03:23

标签: javascript html5 canvas clipboard

我有多个HTML5画布,彼此叠加。订单很重要。 Canvas 2将放置在Canvas 1上,依此类推。

a)有没有办法可以创建所有这些画布保持相同顺序的单个图像(使用toDataURL())?

b)然后,如何将此图像复制到剪贴板,以便将其粘贴到其他应用程序中?

2 个答案:

答案 0 :(得分:2)

步骤:

  1. 创建一个新的画布(可能是隐藏的)
  2. 将两个画布复制到新画布
  3. 使用canvas.toDataURL()
  4. 复制到图像

    看到这个小提琴:http://jsfiddle.net/137f623c/

    假设您有3个画布(2个源和1个组合 - 如果需要,可以隐藏它)和图像:

    <canvas id="myCanvas1" width="200" height="200"></canvas>
    <canvas id="myCanvas2" width="400" height="200"></canvas>
    
    <canvas id="combined" width="400" height="200"></canvas>
    <img src="" id="image" />
    

    而且,剧本:

    var canvas1 = document.getElementById("myCanvas1");
    var ctx1 = canvas1.getContext("2d");
    ctx1.fillStyle = "red";
    ctx1.fillRect(10,10,100,100);
    
    var canvas2 = document.getElementById("myCanvas2");
    var ctx2 = canvas2.getContext("2d");
    ctx2.fillStyle = "blue";
    ctx2.fillRect(50,50,300,100);
    
    var combined = document.getElementById("combined");
    var ctx = combined.getContext("2d");
    
    ctx.drawImage(canvas1, 0, 0); //Copying Canvas1
    ctx.drawImage(canvas2, 0, 0); //Copying Canvas2
    
    document.getElementById("image").src = combined.toDataURL()
    

    不要忘记考虑MarkE的答案(对于b部分),还要考虑浏览器之间的兼容性。至于复制,我看到大多数现代浏览器在右键单击时都有Copy Image。对于旧浏览器,:\上传到服务器并下载可能是解决方案。

答案 1 :(得分:1)

关于你问题的b)部分......

将合并的画布内容复制到剪贴板时会遇到问题,因为现代浏览器尚未统一或完全支持所需的Clipboard API

http://caniuse.com/#feat=clipboard

解决方法是:

  1. 将canvas.toDataURL上传到您的服务器并将其另存为图像文件
  2. 从服务器下载该图像并将其添加为img元素。
  3. 然后,用户可以将right-click-copy img添加到他们的剪贴板中。