Javascript 在HTML画布上旋转图像时出现问题

我有下面的代码，这是一个更大的脚本的一部分，它允许用户将一张照片放在画布上，裁剪它，然后旋转它，如果它不是正面朝上的

window.onload = function() {
    var canvas = document.getElementById("Canvas");
    var ctx = canvas.getContext("2d");
    $('#rotateL').on( "click", {dir: -1}, rotate );
    $('#rotateR').on( "click", {dir: 1}, rotate );
    ....lots more code
}

function rotate(event) {
    var dir = event.data.dir;
    var canvasCopy = document.createElement("canvas");
    var copyContext = canvasCopy.getContext("2d");
    canvasCopy.width = clip.width;
    canvasCopy.height = clip.height;

    if (dir > 0) {
        copyContext.translate(clip.width, 0);
    } else {
        copyContext.translate(0, clip.height);
    }
    copyContext.rotate(Math.PI / (2 * dir));
    copyContext.drawImage(clip, 0, 0);
    clip.src = canvasCopy.toDataURL("image/jpeg", 1.0);
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.drawImage(clip, clip.x1, clip.y1);
}

---

问题是这个。当您单击其中一个旋转按钮时，在第一次单击时，该按钮不执行任何操作，然后在所有后续单击中都能正常工作。如果随后单击“其他旋转”按钮以反向旋转，则它在第一次单击时旋转方向错误，然后在所有后续单击时都能正常工作。我看不出这个问题。有人能帮我解决这个问题吗？

我认为在您要求绘制新图像之前，新图像源没有时间正确加载。看起来您有两个画布，一个用于旋转图像，然后将该外观复制到查看画布上。作为测试，试着把两张画布放在一起比较。“画布”应显示正确旋转的图像，“画布”应落后旋转一步。为什么不让图像在主画布上旋转呢？我开始尝试在主画布上旋转图像，但是剪辑在更大的画布上，我很难让它在轴上旋转。我感到沮丧，知道我可以通过使用另一个更小的画布轻松解决问题。但后来我遇到了这个问题。我还没有尝试过你的建议，但是如果图像没有时间正确加载，图像不是不完整吗？我的图像很好。它们只是在第一次单击时没有按预期旋转。每次执行类似操作时：

image.src=“blabla”

，如果给图像变量一个新的源，加载它需要一些时间，并且可能无法立即绘制（至少根据我自己的经验）。尝试一下，将绘制图像的代码行移动到一个单独的函数中，并延迟调用：

setTimeout（drawFunction，2000）

看看这是否就是问题所在。我很久以前就想写这条评论，但刚刚开始。结果证明Niddro是对的。我在脚本需要重新加载图像源时添加了100米/秒的延迟，解决了这个问题。在我的测试中，我发现这是Firefox独有的问题（我只测试了IE、Chrome和Firefox）。代码在其他浏览器上按预期运行，没有延迟，这使我对这个问题更加困惑，起初，我认为这只是Firefox中的一个bug。我希望这个评论能帮助其他有这个问题的人。