时间戳

首页 > 解决方案 > JS：为什么我必须点击我的画布调整大小按钮两次？

javascript - JS：为什么我必须点击我的画布调整大小按钮两次？

问题描述

我有一个大小为 392x392 的 HTML5 画布，我在其中绘制了一些东西。我正在尝试将该画布的内容调整为另一个大小为 28x28 像素的画布。

以下方法工作正常，除了我必须单击“调整图像大小”按钮两次 - 为什么会这样，我该如何解决？

function resize() {
  //get the base64 string of the Image
  var dataURL = canvas.toDataURL();
  //draw the base64 string into a 28x28 canvas (for resizing)
  var img = new Image();
  img.src = dataURL;
  resizedCtx.drawImage(img, 0, 0, 28, 28);
}
<canvas id="canvas" width="392" height="392" style="border:1px solid;"></canvas>
<br>
<br>
<input type="button" value="resize image" id="btn" size="30" onclick="resize()">
<br>
<br>
<canvas id="resizedCanvas" width="28" height="28" style="border:1px solid;"></canvas>

<script>
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext("2d");

  resizedCanvas = document.getElementById('resizedCanvas');
  resizedCtx = resizedCanvas.getContext('2d');
    
  ctx.fillStyle = "red";
  ctx.fillRect(20, 20, 280, 280);
</script>

jsfiddle.net 中的代码

提前致谢！

标签： javascripthtmlcanvasimage-resizingdouble-click

解决方案

你可以用这个替换你的JS代码

function resize() {
    var myCanvas = document.getElementById('resizedCanvas');
    var ctx = myCanvas.getContext('2d');
    var img = document.getElementById('canvas');
    ctx.drawImage(img,0,0);
}

画布将接受另一个画布内容。你现在所能做的就是操纵变量图像来改变它的位置，你就拥有了。

推荐阅读