Подавать холст не обращая

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

Вы повторении той же последовательности операций каждый раз, когда вы нажимаете на #verticalFlip элемент:

1. Выбор холста элемента
2. Получение ссылки на его контекст
3. Создание нового образа и добавления прослушиватель событий к событию нагрузки
4. Загрузка изображения путем установки его источника
5. Рисование «перевернутой» версии изображения на холсте, когда изображение грузы

Поскольку вы загружаете и затем переворачиваете изображение каждый раз, когда вы нажимаете на документ, для определения направления никогда не отслеживается «состояние». Есть несколько проблем, с вашим подходом, пожалуйста, позвольте мне представить рефакторинга решение:

// 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 2

Ваш код выполняет следующие действия при каждом вызове его

(1) загрузить изображение (2), когда загруженный флип вертикально

поэтому каждый раз, когда вы его вызываете, вы загружаете, а затем переворачиваете исходное изображение.

Вам необходимо загрузить изображение с помощью отдельной функции и после загрузки установить функцию, которая будет переворачивать изображение.

Answer 3

Каждый раз, когда вы загружаете оригинальное (нефунтированное) изображение и , тогда рисуйте его, перевернув на холсте.

Самый простой способ добиться того, что вы хотите, - иметь переменную, представляющую состояние холста (перевернутое/невозмутимое), а затем либо нарисовать изображение «нормальный», либо «перевернутый», например.

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

См, также, это short demo.