logo标签列表

在Canvas上绘制的图像如何保存

javascriptjqueryhtmlcsshtml5-canvas
3
我有一个简单的HTML应用程序，可以在HTML5画布上绘图。我有一个保存按钮，使用canvas.toDataURL捕获图像。但是当我在浏览器中打开此链接时，只显示了绘图的一部分，没有显示整个绘图。下面是我的代码。请尝试一下，它没有意义。
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>
我强烈建议查看该文档：https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL - FeaturedSpace
@FeaturedSpace 是的，我确实这样做了，并且完全按照他们的代码操作。但仍然没有成功。 - asdadsads
除非我误解了，当我将控制台输出复制并粘贴到我的 Mac 上的 Chrome 74 中时，我可以获得完整的图像。 - Devin
var image = canvas.toDataURL("image/png"); 你知道这会返回一个base64编码的值，对吧？ - FeaturedSpace
尝试通过实际输出HTML来渲染它？也许浏览器解释有误。 - FeaturedSpace
显示剩余6条评论
1个回答
1
确保在开发者工具的控制台选项卡中按下“显示更多”按钮，否则您可能只复制输出字符串的一部分（如asdadsads的评论所述）。
在某些情况下，显示截断的base64字符串会导致错误消息，而在其他情况下（例如您的情况），图像的一部分将被显示。
或者，只需使用“复制”按钮，它将复制整个输出。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接