Question

我有以下代码，它是较大脚本的一部分，允许用户在Canvas上放置照片，裁剪，然后旋转它，如果它不是正面朝上。

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);
}

问题是这个。当您单击其中一个旋转按钮时，在第一次单击时，它什么也不做，然后在所有后续点击上正常工作。如果您然后单击另一个旋转按钮以反方向旋转，它会在第一次单击时旋转错误的方向，然后在所有后续点击上正常工作。我在查看问题时遇到了麻烦。任何人都可以帮我解决这个问题吗？

无法在HTML Canvas上旋转图像

0 个答案: