html5画布javascript复制图片

我有一个html5页面。它使用JQuery和sketch.js（用于免费绘图）。我不会将它连接到任何Web服务器。在这一刻，我想要使用这个JavaScript作为桌面应用程序。我的目的是将图像从一个画布复制到同一页面中的另一个画布。在自由绘制任何东西后，我可以看到url被复制到textarea，但是在点击显示URL链接后没有图片。有人能给我提示如何从一个画布上复制图像到另一个画布吗？html5画布javascript复制图片

/1 /源码，一个需要添加HTML标记在开始的时候，不要忘了<>

<head> 
<title>sketch and free hand drawing</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> 
</script> 
<![endif]--> 
<meta charset="UTF-8"> 
<meta http-equiv="Content-Type" content="image/png"/> 
<script src="js/jquery-1.11.0.min.js"></script> 
<script src="js/sketch.js"></script>

/2 /单需要添加以上/头。不要忘了<>

<body> 
<script> 
    function toDo(){ 
     console.log(document.getElementById("colors_sketch").toDataURL("image/png")); 
     document.getElementById("cvs").value=document.getElementById("colors_sketch").toDataURL("image/png"); 
     document.getElementById("txt").value=document.getElementById("colors_sketch").toDataURL("image/png"); 
    } 
</script> 
<div class="tools"> 
    <a href="#colors_sketch" data-download="png" style="float: right; width: 100px;">Download</a> 
</div> 
<div class="tools"> 
    <a href="#cvs" style="float: right; width: 100px;" onclick="toDo();">show URL</a> 
</div> 

<textarea id="txt"></textarea> 
<hr/> 
<canvas id="colors_sketch" width="800" height="300">hello</canvas> 
<hr/> 
<canvas id="cvs" width="800" height="300"></canvas> 
<script type="text/javascript"> 
    $(function() { 
     $.each(['#f00', '#ff0', '#0f0', '#0ff', '#00f', '#f0f', '#000', '#fff'], function() { 
     $('#colors_demo .tools').append("<a href='#colors_sketch' data-color='" + this + "' style='width: 10px; background: " + this + ";'></a> "); 
     }); 
     $.each([3, 5, 10, 15], function() { 
     $('#colors_demo .tools').append("<a href='#colors_sketch' data-size='" + this + "' style='background: #ccc'>" + this + "</a> "); 
     }); 
     $('#colors_sketch').sketch(); 
    });

/3 /一个需要添加/脚本上面和/机身上方和/ HTML上面，不要忘记<>

来源

2014-03-03 user84592

从一个画布上移动图像到另一个，您可以简单地使用drawImage

destinationContext.drawImage(sourceCanvas,0,0);

来自源画布的像素将被绘制到目标画布上。

演示：http://jsfiddle.net/m1erickson/2hb56/

我试图修改代码，但它似乎也有一个设计问题。

SketchJS将清除复制的图像以准备其自己的图纸（复制的图像将被删除）。

实施例的代码复制像素从一个帆布到另一：

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script src="http://code.jquery.com/jquery.min.js"></script> 
<script src="sketch.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
    $(function(){ 

     // get references to canvases and contextx 
     sourceCanvas=document.getElementById("source"); 
     sourceContext=sourceCanvas.getContext("2d"); 
     destinationCanvas=document.getElementById("destination"); 
     destinationContext=destinationCanvas.getContext("2d"); 

     // draw a test image into the source canvas 
     var testImg=new Image(); 
     testImg.onload=function(){ 
      sourceContext.drawImage(testImg,0,0); 
     } 
     testImg.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png"; 

     // when the button is clicked 
     // copy the source canvas onto the destination canvas 
     $("#copy").click(function(){ 
      destinationContext.drawImage(sourceCanvas,0,0); 
     }) 


    }); // end $(function(){}); 
</script> 
</head> 
<body> 
    <canvas id="source" width=256 height=256></canvas><br> 
    <button id="copy">Copy canvas above to canvas below</button><br> 
    <canvas id="destination" width=256 height=256></canvas> 
</body> 
</html>

来源

2014-03-03 18:37:40 markE

html5画布javascript复制图片

回答

相关问题