保存在画布上绘制的图像答案

【问题标题】：Saving an Image drawn on a Canvas保存在画布上绘制的图像
【发布时间】：2019-10-16 14:50:50
【问题描述】：

我有一个简单的 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>

【问题讨论】：

我强烈建议您查看相关文档：developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/…
@FeaturedSpace 是的，我做到了，我完全按照他们的代码。还是不行。
除非我有误解，否则当我复制控制台输出并粘贴到我的 Mac 上的 Chrome 74 时，我会绘制完整的图像。
var image = canvas.toDataURL("image/png");而且您知道返回 base64 编码值对吗？
什么？没门。我也在 Mac 和 Chrome 74 上。

标签： javascript jquery html css html5-canvas

【解决方案1】：

确保您在开发者工具的控制台选项卡中按下“显示更多”按钮，否则您可能只复制部分输出字符串（根据 asdadsads 的评论）。

在某些情况下，显示截断的 base64 字符串会导致错误消息，而在其他情况下（例如您的），将显示图像的一部分。

或者，只需使用“复制”按钮，它将复制整个输出。

【讨论】：