在3层画布上绘制图像并保存 [英] drawing images on 3 layer canvas and saving

问题描述

我有一个3层的画布，我已经给每一个单独的id。

这是我在做什么。

HTML

>
< canvas id =layer1style =position：absolute; left：0; top：0; z-index：0;>
< / canvas>
< canvas id =layer2style =position：absolute; left：0; top：0; z-index：1;>
< / canvas>
< canvas id =layer3style =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 ='horizo​​ntal.png'; 
  

如何在所有图层上绘制图像并创建单个canvas.toDataUrl？

$要绘制所有三个图层，您必须为所有图层创建上下文。

<$ p

$ p> //对layer1的引用
var canvas1 = document.getElementById（'layer1'）;
var context1 = canvas1.getContext（'2d'）;

//对layer2的引用
var canvas2 = document.getElementById（'layer2'）;
var context2 = canvas2.getContext（'2d'）;

//对layer3的引用
var canvas3 = document.getElementById（'layer3'）;
var context3 = canvas3.getContext（'2d'）;


然后，完成所有图层的绘制后，合并它们（这里合并到layer1） / p>

  //将所有图层合并到layer1上
 context1.drawImage（canvas2,0,0）; 
 context1.drawImage（canvas3,0,0）; 
  

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

  //将合并的图形保存为图像
 //并将img元素src设置为合并的图像
 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 =stylesheettype =text / cssmedia =allhref =css / reset.css/> <！ -  reset css  - > 
< script type =text / javascriptsrc =http://code.jquery.com/jquery.min.js>< / script> 
 
< style> 
 body {background-color：ivory; } 
 canvas {border：1px solid red;} 
< / style> 
 
< script> 
 $（function（）{
 
 //对layer1的引用
 var canvas1 = document.getElementById（'layer1'）; 
 var context1 = canvas1.getContext '2d'）; 
 
 //对layer2的引用
 var canvas2 = document.getElementById（'layer2'）; 
 var context2 = canvas2.getContext 
 
 //对layer3的引用
 var canvas3 = document.getElementById（'layer3'）; 
 var context3 = canvas3.getContext（'2d'）; 
 
 //在层上绘制东西
 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） ; 
 
 //将所有图层合并到layer1上
 context1.drawImage（canvas2,0,0）; 
 context1.drawImage（canvas3,0,0）; 
 
 //将合并的图形保存为图像
 //并将img元素src设置为合并的图像
 var img = new Image（）; 
 img.onload = function （）{
 document.getElementById（results）。src = img.src; 
} 
 img.src = canvas1.toDataURL（）; 
 
 
 
}）; // end $（function（）{}）; 
< / script> 
 
< / head> 
 
< body> 
< p>在3个画布上绘制矩形< / p> 
< p>将所有绘图合并到第一个画布< / p> 
< p>从合并的绘图创建图像< / p> 
< p>使用合并的图片设置图片元素< / p> 
< canvas id =layer1width = 150 height = 150>< / canvas> 
< canvas id =layer2width = 150 height = 150>< / canvas>< br> 
< canvas id =layer3width = 150 height = 150>< / canvas> 
< img id =resultswidth = 150 height = 150> 
< / body> 
< / html> 
  

I have a 3 layers of canvas, which I have given a separate id to each.

This is what I am doing.

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>

I can draw images on 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';

How will I draw images on all the layers and create single canvas.toDataUrl ?

解决方案

To draw on all three "layers" you must create contexts for all layers

// 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');

Then after you’re done drawing on all layers, merge them (here merged onto layer1):

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

And finally save the merged canvas to an image and set your img src to that image.

// 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();

Here is code and a Fiddle: 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>

这篇关于在3层画布上绘制图像并保存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！