Question

我使用以下代码翻转画布，它完美无缺，但是如果我再次调用它就不会将画布翻转回来

$(document).on("click", "#verticalFlip", function() { // save

        var canvasH = document.getElementById("myCanvas");
        var ctxH = canvasH.getContext("2d");
        var img = new Image();
        img.onload = function () {
            // flip vertical
            canvasH.width = img.width;
            canvasH.height = img.height;
            ctxH.save();
            ctxH.scale(1, -1);
            ctxH.translate(0, -img.height);
            ctxH.drawImage(img, 0, 0);
            ctxH.restore();
        }
        img.src = "http://myurl.com/" + user_id + "_temp.jpg";
    });

如何将画布恢复到原始状态？

Answer 1

每次，您正在加载原始（未打开的）图像，然后然后将其绘制在画布上。

实现你想要的最简单的方法是使用一个表示画布状态的变量（翻转/解开），然后绘制图像“normaly”或“flipped”，例如。

var isFlipped = <true/false>;
function() flipAndDraw(...) {
    ...
    if (isFlipped) { /* Draw normaly */ }
    else { /* Draw flipped */ }
    isFlipped = !isFlipped;
    ...

另请参阅此 short demo 。

Answer 2

每次单击#verticalFlip元素时，您都在重复完全相同的操作系列：

选择画布元素
获取对其背景的引用
创建新图像并向其加载事件添加事件侦听器
通过设置来源
在图片加载时在画布上绘制“翻转”版本的图像

由于每次单击文档时都要加载然后翻转图像，因此从来没有任何跟踪的“状态”来确定方向。您的方法存在一些问题，请允许我提供重构的解决方案：

// jQuery document ready function
$(function() {

    // Cache jQuery selections
    var $verticalFlip = $("#verticalFlip");

    // Cache canvas element and context
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    // Cache the image object
    var image = new Image();

    // Create loaded and flipped states for the image
    var imageFlipped = false;
    var imageLoaded = false;

    // Add event handlers
    $verticalFlip.on("click", onVerticalFlipClick);
    image.onload = onImageLoad;



    // Load image function
    function loadImage(src) {
        imageLoaded = false;
        image.src = src;
    };

    // Draw image function
    function drawImage(flip) {

        // Only draw the image on the canvas if it has loaded
        if (imageLoaded) {

            // Set the scale and translate the context based on the passed flip boolean
            context.save();
            context.scale(1, flip ? -1 : 1);
            context.translate(0, flip ? -image.height : 0);
            context.drawImage(image, 0, 0);
            context.restore();
        }
    };



    // Image load callback
    function onImageLoad(event) {
        imageLoaded = true;
        canvas.width = image.width;
        canvas.height = image.height;
        drawImage(imageFlipped);
    };

    // Click callback
    function onVerticalFlipClick(event) {

        // Invert the flip state
        imageFlipped = !imageFlipped;

        // Draw the image on the canvas
        drawImage(imageFlipped);
    };



    // Finally, load the image
    loadImage("http://myurl.com/" + user_id + "_temp.jpg");

});

Answer 3

每次调用时，您的代码都会执行以下步骤

（1）在垂直加载时加载图像（2）

所以每次调用它都会加载然后翻转原始图像。

您需要使用单独的功能加载图像，并在加载后设置将翻转图像的功能。

翻转画布不会反转

3 个答案: