用画布绘图填充图像

Question

代码说明：我正在使用画布使用某些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

是的，这是可能的。 这是您可以实现的方式...

 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); } 

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

 <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>