Question

代码说明：我使用canvas绘制使用一些java脚本..我期待用户在画布区域绘制一些东西然后保存或清理画布区域..

这是我到目前为止所做的..这里是代码/;但它需要一个浏览器才能工作 https://jsfiddle.net/RababAlkhalifa/k0y1yzh8/

java脚本：

     var lastPt = null;
  var canvas;
  var ctx;

  function init() {
      canvas = document.getElementById("mycanvas");
      ctx = canvas.getContext("2d");
      var offset = getOffset(canvas);
      if (window.PointerEvent) {
          canvas.addEventListener("pointerdown", function() {
              canvas.addEventListener("pointermove", draw, false);
          }, false);
          canvas.addEventListener("pointerup", endPointer, false);
      } else {
          //Provide fallback for user agents that do not support Pointer Events
          canvas.addEventListener("mousedown", function() {
              canvas.addEventListener("mousemove", draw, false);
          }, false);
          canvas.addEventListener("mouseup", endPointer, false);
      }
  }

  // Event handler called for each pointerdown event:
  function draw(e) {
      if (lastPt != null) {
          ctx.beginPath();
          // Start at previous point
          ctx.moveTo(lastPt.x, lastPt.y);
          // Line to latest point
          ctx.lineTo(e.pageX, e.pageY);
          // Draw it!
          ctx.stroke();
      }
      //Store latest pointer
      lastPt = { x: e.pageX, y: e.pageY };
  }

  function getOffset(obj) {
      //...
  }

  function endPointer(e) {
      //Stop tracking the pointermove (and mousemove) events
      canvas.removeEventListener("pointermove", draw, false);
      canvas.removeEventListener("mousemove", draw, false);

      //Set last point to null to end our pointer path
      lastPt = null;
  }

  function clearCanvas() {

      ctx.clearRect(0, 0, canvas.width, canvas.height);
      var w = canvas.width;
      canvas.width = 1;
      canvas.width = w;
  }

  function download() {
      var dt = canvas.toDataURL();
      this.href = dt; //this may not work in the future..
      clearCanvas();
  }

  document.getElementById('download').addEventListener('click', download, false);

HTML：

<canvas id="mycanvas" width="600px" height="600px" style="border:1px solid black;"></canvas>
            <div class="convas_contrllers">
                <button onclick="clearCanvas()">Clear</button>
                <a id="download" download="CanvasDemo.png">Download as image</a>
            </div>

<a id="download" download="CanvasDemo.png">Download as image</a>

<div class="slide" id="img1"><img src="http://placehold.it/300x100&text=FooBar1" /></div>

问题：我需要在清除或保存画布之前将保存的画布放在图像id = img1元素中..这可能吗？

Answer 1

是的，这是可能的。以下是您如何实现这一目标......

＆＃13;

var image = document.querySelector('#img1');
var canvas = document.querySelector('#mycanvas');
var ctx = canvas.getContext('2d');
var isMousePressed = false;

canvas.onmousedown = function(e) {
	isMousePressed = true;
	ctx.beginPath();
	ctx.moveTo(e.offsetX, e.offsetY);
};
canvas.onmouseup = function() {
	isMousePressed = false;
};
canvas.onmousemove = function(e) {
	if (isMousePressed) {
		ctx.lineTo(e.offsetX, e.offsetY);
		ctx.stroke();
	}
};

function clearCanvas() {
	image.src = canvas.toDataURL();
	ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function download() {
	image.src = canvas.toDataURL();
	
	var a = document.createElement('a');
	a.href = canvas.toDataURL();
	a.download = 'myImage.png'; //image name
	document.body.appendChild(a);
	a.click();
	document.body.removeChild(a);
}

＆＃13;

body{margin:10px 0 0 0;overflow:hidden}.slide{position:absolute;top:10px;left:200px}

＆＃13;

<canvas id="mycanvas" width="180" height="180" style="border:1px solid black; cursor: default;"></canvas>
<div class="convas_contrllers">
    <button id="clear" onclick="clearCanvas()">Clear</button>
    <button id="download" onclick="download()">Download as image</button>
</div>
<div class="slide"><img id="img1" src="https://placehold.it/300x100&text=FooBar1"></div>

＆＃13;

用画布绘图填充图像

1 个答案: