在3层画布上绘制图像并保存

我有一个3层的画布，我给每个画布分别设置一个ID。在3层画布上绘制图像并保存

这就是我正在做的。

HTML

<div style="position:relative;"> 
    <canvas id="layer1" style="position: absolute; left: 0; top: 0; z-index: 0;"> 
    </canvas> 
    <canvas id="layer2" style="position: absolute; left: 0; top: 0; z-index: 1;"> 
    </canvas> 
    <canvas id="layer3" style="position: absolute; left: 0; top: 0; z-index: 1;"> 
    </canvas> 
</div>

我可以借鉴layer1的图像

var canvas = document.getElementById('layer1'); 
var context = canvas.getContext('2d'); 
context.canvas.width = window.innerWidth; 
context.canvas.height = window.innerHeight*0.7; 
var imageObj = new Image(); 
var imageObj1 = new Image(); 

imageObj.onload = function() { 
    context.drawImage(imageObj, 0, 0,context.canvas.width,context.canvas.height*0.9); 
    context.drawImage(imageObj1, x1, y1,6,canvasHeight);  
}; 

imageObj1.src='vertical.png'; 
imageObj.src = 'horizontal.png';

我将如何利用所有的层图像，并创造单canvas.toDataUrl？

来源

2013-07-09 Beginner

的[？我怎样才能在其中div包含一个或一个以上的HTML5画布元素客户端保存的div作为图像（可能重复的HTTP ：//stackoverflow.com/questions/3880330/how-can-i-save-div-as-image-at-client-side-where-div-contains-one-or-more-than-o） –

但我我无法在第2层和第3层上显示图像 – Beginner

您会这样做，就像使用'layer1'一样。您需要基于'layer2'等的另一个上下文。'var canvas2 = document.getElementById（'layer2'）; var context2 = canvas.getContext（'2d'）;' –

利用所有三个“层次”你必须为所有图层

// references to layer1 
var canvas1 = document.getElementById('layer1'); 
var context1 = canvas1.getContext('2d'); 

// references to layer2 
var canvas2 = document.getElementById('layer2'); 
var context2 = canvas2.getContext('2d'); 

// references to layer3 
var canvas3 = document.getElementById('layer3'); 
var context3 = canvas3.getContext('2d');

然后创建上下文你完成所有图层绘制后，将它们合并（这里合并到层1）：

// merge all layers onto layer1 
context1.drawImage(canvas2,0,0); 
context1.drawImage(canvas3,0,0);

最后，将合并后的画布保存为图像，并将img src设置为该图像。

// save the merged drawings as an image 
// and set the img element src to that merged image 
var img=new Image(); 
img.onload=function(){ 
    document.getElementById("results").src=img.src; 
} 
img.src=canvas1.toDataURL();

这里是代码和一个小提琴：http://jsfiddle.net/m1erickson/fhjwY/

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

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

<script> 
$(function(){ 

// references to layer1 
var canvas1 = document.getElementById('layer1'); 
var context1 = canvas1.getContext('2d'); 

// references to layer2 
var canvas2 = document.getElementById('layer2'); 
var context2 = canvas2.getContext('2d'); 

// references to layer3 
var canvas3 = document.getElementById('layer3'); 
var context3 = canvas3.getContext('2d'); 

// draw stuff on the layers 
context1.fillStyle="red"; 
context2.fillStyle="blue"; 
context3.fillStyle="green"; 

context1.fillRect(20,20,50,50); 
context2.fillRect(50,50,50,50); 
context3.fillRect(80,80,50,50); 

// merge all layers onto layer1 
context1.drawImage(canvas2,0,0); 
context1.drawImage(canvas3,0,0); 

// save the merged drawings as an image 
// and set the img element src to that merged image 
var img=new Image(); 
img.onload=function(){ 
    document.getElementById("results").src=img.src; 
} 
img.src=canvas1.toDataURL(); 



}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <p>Draw rects on 3 canvases</p> 
    <p>Merge all drawings to 1st canvas</p> 
    <p>Create an image from merged drawings</p> 
    <p>Set the image element with that merged image</p> 
    <canvas id="layer1" width=150 height=150></canvas> 
    <canvas id="layer2" width=150 height=150></canvas><br> 
    <canvas id="layer3" width=150 height=150></canvas> 
    <img id="results" width=150 height=150> 
</body> 
</html>

来源

2013-07-09 18:11:32 markE

在3层画布上绘制图像并保存

回答

相关问题