保存在畫布上繪制的圖像

Question

我有一個簡單的HTML應用程序，我可以在HTML5畫布上繪制。 我有一個保存按鈕，我使用canvas.todataURL捕獲圖像。 當我在Web瀏覽器中打開此鏈接時，不會顯示完整的繪圖 - 僅顯示圖形的子部分。 以下是我的代碼。 嘗試一下，沒有意義。

JSFIDDLE： https ：//jsfiddle.net/v0a2Lfsk/1/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>

<script>
var mousePressed = false;
var lastX, lastY;
var ctx;

$(window).on('load', function() { 
  canv = document.getElementById('myCanvas');
  ctx = canv.getContext("2d");
  canv.width  = $(window).width();
  canv.height = 1000;

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

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

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


});

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

function next(){

    var canvas = document.getElementById('myCanvas');

    var image = canvas.toDataURL("image/png");  // here is the most important part because if you dont replace you will get a DOM 18 exception.
    console.log(image);

    // html2canvas(document.querySelector("#myCanvas")).then(canvas => {
    //     document.body.appendChild(canvas);
    //     alert("dasds");
    // });

}

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>
<body>
 <canvas id="myCanvas"></canvas>
  <div class="controls">     
    <button onclick="javascript:clearArea();return false;">Clear Area</button>
    <button onclick="javascript:next();return false;">Save (Print to Console Log)</button>
    <!-- Line width : <select id="selWidth">
    <option value="1">1</option>
    <option value="3">3</option>
    <option value="5" selected="selected">5</option>
    <option value="7">7</option>
    <option value="9">9</option>
    <option value="11">11</option>
    </select>
    Color : <select id="selColor">
    <option value="black">black</option>
    <option value="blue" selected="selected">blue</option>
    <option value="red">red</option>
    <option value="green">green</option>
    <option value="yellow">yellow</option>
    <option value="gray">gray</option>
    </select> -->
  </div>

</body>
  <style>
body{
  overflow:hidden;
}
#mycanvas
{
  background-color:#fff;
  position:absolute;
*/  background-repeat:   no-repeat;
}
.controls
{
  position:absolute;
  top:0px;
  right:0px;
  width: 600px;
  background-color:#2277dd;
  padding:5px;
  margin:2px;
  color:#fff;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
</style>

Answer 1

確保按下Developer Tools的Console選項卡中的“Show More”按鈕，否則您只能復制部分輸出字符串（根據asdadsads的注釋）。

在某些情況下，顯示一個截止的base64字符串將導致錯誤消息，而在其他情況下（如您的），將顯示一部分圖像。

或者，只需使用“復制”按鈕，它將復制整個輸出。

保存在畫布上繪制的圖像

問題描述

1 個解決方案

解決方案1
1 已采納 2019-05-30 23:42:28

保存在畫布上繪制的圖像

問題描述

1 個解決方案

解決方案1 1 已采納 2019-05-30 23:42:28

解決方案1
1 已采納 2019-05-30 23:42:28