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

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

下面的方法可以很好地工作，除了我必须点击“调整图像大小”按钮两次-为什么会这样，我如何修复它

function resize（）{
//获取图像的base64字符串
var dataURL=canvas.toDataURL（）；
//将base64字符串绘制到28x28画布中（用于调整大小）
var img=新图像（）；
img.src=数据URL；
drawImage（img，0，0，28，28）；
}

canvas=document.getElementById（'canvas'）；
ctx=canvas.getContext（“2d”）；
resizedCanvas=document.getElementById（'resizedCanvas'）；
resizedCtx=resizedCanvas.getContext（'2d'）；
ctx.fillStyle=“红色”；
ctx.fillRect（20,20,280,280）；

function resize（）{
//获取图像的base64字符串
var dataURL=canvas.toDataURL（）；
//将base64字符串绘制到28x28画布中（用于调整大小）
var img=新图像（）；
img.onload=函数（）{
drawImage（img，0，0，28，28）；
};
img.src=数据URL；
}

canvas=document.getElementById（'canvas'）；
ctx=canvas.getContext（“2d”）；
resizedCanvas=document.getElementById（'resizedCanvas'）；
resizedCtx=resizedCanvas.getContext（'2d'）；
ctx.fillStyle=“红色”；
ctx.fillRect（20,20,280,280）；

您尝试

绘制图像时，您的
图像
对象尚未加载完其内容。您必须等待图像触发
load
事件。在该事件激发之前，图像将不会以任何形式呈现，因为它尚未完成从其
src
URL加载数据

您的代码在第二次单击后工作，因为浏览器在第一次单击后缓存了与该特定的
src
关联的图像数据，因此它可以在第二次单击时立即渲染

只需将您的
resizedCtx.drawImage（…）
调用放在回调函数中，该回调函数在
加载
事件触发
img
之后才会运行

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;
  img.addEventListener("load", function() {
      resizedCtx.drawImage(img, 0, 0, 28, 28);
  });
}


function resize（）{
//获取图像的base64字符串
var dataURL=canvas.toDataURL（）；
//将base64字符串绘制到28x28画布中（用于调整大小）
var img=新图像（）；
img.src=数据URL；
img.addEventListener（“加载”，函数（）{
drawImage（img，0，0，28，28）；
});
}







canvas=document.getElementById（'canvas'）；
ctx=canvas.getContext（“2d”）；
resizedCanvas=document.getElementById（'resizedCanvas'）；
resizedCtx=resizedCanvas.getContext（'2d'）；
ctx.fillStyle=“红色”；
ctx.fillRect（20,20,280,280）；
你可以用这个替换你的JS代码

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

画布将接受另一个画布内容。您现在所能做的就是操纵变量image来更改它的位置，这样就可以了。
您可以在other中使用img.onload来加载图像，然后执行函数
function resize（）{
//获取图像的base64字符串
var dataURL=canvas.toDataURL（）；
//将base64字符串绘制到28x28画布中（用于调整大小）
var img=新图像（）；
img.src=数据URL；
img.onload=函数（）{
drawImage（img，0，0，28，28）；
}
}

只需将输入标记替换为此处的标记即可解决问题


function resize（）{
//获取图像的base64字符串
var dataURL=canvas.toDataURL（）；
//将base64字符串绘制到28x28画布中（用于调整大小）
var img=新图像（）；
img.src=数据URL；
img.onload=函数（）{
drawImage（img，0，0，28，28）；
}
}









canvas=document.getElementById（'canvas'）；
ctx=canvas.getContext（“2d”）；
resizedCanvas=document.getElementById（'resizedCanvas'）；
resizedCtx=resizedCanvas.getContext（'2d'）；
ctx.fillStyle=“红色”；
ctx.fillRect（20,20,280,280）；
谢谢你的回答，但这不会改变任何事情……嗨！答案已更新。抱歉，但我仍要单击两次。不知道发生了什么。这是一次点击，让我检查一下。回答得真好+1我希望您不介意，但我添加了一个片段，以显示您的更改按预期工作。我把它默认设置为隐藏，这样就不会占用太多空间，也不会让你的帖子看起来很凌乱。非常感谢！这个很好用！重要提示：甚至不要通过img来调整画布的大小。只需直接在调整大小的画布上绘制画布。