在 3 层画布上绘制图像并保存
Posted
技术标签:
【中文标题】在 3 层画布上绘制图像并保存【英文标题】：drawing images on 3 layer canvas and saving 【发布时间】：2013-07-09 17:07:58 【问题描述】：我有 3 层画布，我为每一层赋予了单独的 id。
这就是我正在做的。
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 上绘制图像
JS
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 ？
【问题讨论】：
How can I save div as image at client side where div contains one or more than one html5 canvas elements? 的可能重复项 但我无法在第 2 层和第 3 层显示图像 你可以像layer1 那样做。您需要基于layer2 等的另一个上下文var canvas2 = document.getElementById('layer2'); var context2 = canvas.getContext('2d');
【参考方案1】：
要绘制所有三个“层”，您必须为所有层创建上下文
// 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');
然后在你完成所有图层的绘制之后，将它们合并（这里合并到 layer1）：
// 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;
canvasborder: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>
【讨论】：
以上是关于在 3 层画布上绘制图像并保存的主要内容，如果未能解决你的问题，请参考以下文章