Question

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

Answer 1

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

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

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

保存在画布上绘制的图像

1 个答案: