合并帆布和背景 [英] merging canvas and background

问题描述

我有一个有GIF背景的画布。我需要用户上传图纸和BG，因此另一个用户可以看到图纸相对于BG的位置。
canvas.toDataURL（）;代码只显示带有用户图纸的画布区域，但不显示BG。如何平铺或合并图层，以便我可以上传到数据库。

  var mousePressed = false; var lastX，lastY; var ctx; function InitThis（）{ctx = document.getElementById（'myCanvas'）。getContext（2d）; $（'＃myCanvas'）。mousedown（function（e）{mousePressed = true; Draw（e.pageX  -  $（this）.offset（）。left，e.pageY  -  $（this）.offset ，false）;}）; $（'＃myCanvas'）。mousemove（function（e）{if（mousePressed）{Draw（e.pageX  -  $（this）.offset（）。left，e.pageY  -  $（this）.offset top，true）;}}）; $（'＃myCanvas'）。mouseup（function（e）{mousePressed = false;}）; $（'＃myCanvas'）。mouseleave（function（e）{mousePressed = false;}）;} function Draw（x，y，isDown）{if（isDown）{ctx.beginPath ctx.strokeStyle = $（'＃selColor'）。val（）; ctx.lineWidth = $（'＃selWidth'）。val（）; ctx.lineJoin =round; ctx.moveTo（lastX，lastY）; ctx.lineTo（x，y）; ctx.closePath（）; ctx.stroke（）; } lastX = x; lastY = y;} function clearArea（）{//清除canvas时使用单位矩阵ctx.setTransform（1，0，0，1，0，0）; ctx.clearRect（0，0，ctx.canvas.width，ctx.canvas.height）;}  

 < script src =http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.jstype =text / javascript> ;< / script>< script type =text / javascriptsrc =jscripts / JsCode.js> var dataURL = canvas.toDataURL（）;< / script><！ -  canvas画图并上传mySQL  - >< div align =center> < img src =graphics / teethDrawing.gifwidth =705style =position：absolute; z-index：-1/> < canvas id =myCanvaswidth =700height =965style =border：2px solid black>< / canvas& < br /> < br /> < button onclick =javascript：clearArea（）; return false;>清除区域< / button>线宽：< select id =selWidth> < option value =1> 1< / option> < option value =3selected =selected> 3< / option> < option value =5> 5< / option> < / select>颜色：< select id =selColor> < option value =blackselected =selected> black< / option> < option value =blue> blue< / option> < option value =red>红色< / option> < / select>< / div>< / div>  

帮助

解决方案

  //给图片添加背景图片id，以便更容易获取
< img id ='bk'src =graphics / teethDrawing.gif
 width =705style =position：absolute; z-index：-1 /> 
 
 //获取对bk映像的引用
 var bk = document.getElementById（'bk'）; 
 
 //导致在现有绘图之后绘制新绘图
 ctx.globalCompositeOperation ='destination-over'; 
 
 //将img绘制到画布上（在现有行后面）
 ctx.drawImage（bk，0,0）; 
 
 //总是清理！重置为默认。 
 ctx.globalCompositeOperation ='source-over'; 
  

此过程将永久添加bk图像到画布。如果你需要分开bk和canvas-drawings，那么你可以创建第二个内存中的canvas，通过将bk-image和你的canvas-drawing绘制到内存中的canvas来展平你的内容。

  //创建临时画布
 var mem = document.createElement（'canvas'）; 
 var mctx = mem.getContext（'2d'）; 
 mem.width = canvas.width; 
 mem.height = canvas.height; 
 
 //将bk绘制到mem画布
 mctx.drawImage（bk，0,0）; 
 
 //将主画布绘制到mem画布
 mctx.drawImage（canvas，0,0）; 
  

I have a canvas that has a GIF background. I need for the user to upload the drawing and the BG, so another user can see where the drawing is in relation to the BG. The canvas.toDataURL(); code only shows the canvas area with the user drawings, but not the BG. How to flatten or "merge layers", so I can upload to database.

var mousePressed = false;
var lastX, lastY;
var ctx;

function InitThis() {
  ctx = document.getElementById('myCanvas').getContext("2d");

  $('#myCanvas').mousedown(function(e) {
    mousePressed = true;
    Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
  });

  $('#myCanvas').mousemove(function(e) {
    if (mousePressed) {
      Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
    }
  });

  $('#myCanvas').mouseup(function(e) {
    mousePressed = false;
  });
  $('#myCanvas').mouseleave(function(e) {
    mousePressed = false;
  });
}

function Draw(x, y, isDown) {
  if (isDown) {
    ctx.beginPath();
    ctx.strokeStyle = $('#selColor').val();
    ctx.lineWidth = $('#selWidth').val();
    ctx.lineJoin = "round";
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(x, y);
    ctx.closePath();
    ctx.stroke();
  }
  lastX = x;
  lastY = y;
}

function clearArea() {
  // Use the identity matrix while clearing the canvas
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jscripts/JsCode.js">
  var dataURL = canvas.toDataURL();
</script>

<!--canvas drawing and upload mySQL-->
<div align="center">
  <img src="graphics/teethDrawing.gif" width="705" style="position: absolute; z-index: -1" />
  <canvas id="myCanvas" width="700" height="965" style="border:2px solid black"></canvas>

  <br />
  <br />
  <button onclick="javascript:clearArea();return false;">Clear Area</button>
  Line width :
  <select id="selWidth">
    <option value="1">1</option>
    <option value="3" selected="selected">3</option>
    <option value="5">5</option>

  </select>
  Color :
  <select id="selColor">
    <option value="black" selected="selected">black</option>
    <option value="blue">blue</option>
    <option value="red">red</option>


  </select>
</div>
</div>

The image isn't shown but does show on page.

Help

解决方案

You can add your background image "behind" the existing canvas drawings using compositing.

// give the image an id so it's more easily fetched
<img id='bk' src="graphics/teethDrawing.gif" 
     width="705" style="position: absolute; z-index: -1" />

// fetch a reference to the bk image
var bk=document.getElementById('bk');

// causes new drawings to be drawn behind existing drawings
ctx.globalCompositeOperation='destination-over';

// draw the img to the canvas (behind existing lines)
ctx.drawImage(bk,0,0);

// always clean up! Reset to default.
ctx.globalCompositeOperation='source-over';

This process will permanently add the bk image to the canvas. If you need the bk and canvas-drawings separated then you can create a second in-memory canvas to flatten your content by drawing both the bk-image and your canvas-drawings to the in-memory canvas.

// create a temporary canvas 
var mem=document.createElement('canvas');
var mctx=mem.getContext('2d');
mem.width=canvas.width;
mem.height=canvas.height;

// draw the bk to the mem canvas
mctx.drawImage(bk,0,0);

// draw the main canvas to the mem canvas
mctx.drawImage(canvas,0,0);

这篇关于合并帆布和背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！