Изменение размера изображения без влияния на внешний вид холста?

Question

У меня есть холст, на котором пользователь рисует. После нажатия кнопки, я делаю несколько вещей во втором холсте, например, отсекая пустое пространство и повторно центрируя рисунок (чтобы не влиять на исходный холст).

Я также создаю третий холст, чтобы я мог изменять размер вывода до определенного размера. Моя проблема в том, что я не хочу, чтобы исходный холст, на который пользователи рисовали, был затронут. Сейчас все работает, и мое изображение изменено, но это оригинальное полотно. Как оставить исходный холст незатронутым?

Вот моя функция:

  //Get Canvas 
      c = document.getElementById('simple_sketch'); 

      //Define Context 
      var ctx = c.getContext('2d'); 

      //Create Copy of Canvas 
      var copyOfContext = document.createElement('canvas').getContext('2d'); 

      //Get Pixels 
      var pixels = ctx.getImageData(0, 0, c.width, c.height); 

      //Get Length of Pixels 
      var lengthOfPixels = pixels.data.length; 

      //Define Placeholder Variables 
      var i; 
      var x; 
      var y; 
      var bound = { 
       top: null, 
       left: null, 
       right: null, 
       bottom: null 
      }; 

      //Loop Through Pixels 
      for (i = 0; i < lengthOfPixels; i += 4) { 

       if (pixels.data[i+3] !== 0) { 
        x = (i/4) % c.width; 
        y = ~~((i/4)/c.width); 

        if (bound.top === null) { 
        bound.top = y; 
        } 

        if (bound.left === null) { 
        bound.left = x; 
        } else if (x < bound.left) { 
        bound.left = x; 
        } 

        if (bound.right === null) { 
        bound.right = x; 
        } else if (bound.right < x) { 
        bound.right = x; 
        } 

        if (bound.bottom === null) { 
        bound.bottom = y; 
        } else if (bound.bottom < y) { 
        bound.bottom = y; 
        } 
       } 
      } 

      //Calculate Trimmed Dimensions 
      var padding = 1; 
      var trimmedHeight = bound.bottom + padding - bound.top; 
      var trimmedWidth = bound.right + padding - bound.left; 

      //Get Longest Dimension (We Need a Square Image That Fits the Drawing) 
      var longestDimension = Math.max(trimmedHeight, trimmedWidth); 

      //Define Rect 
      var trimmedRect = ctx.getImageData(bound.left, bound.top, trimmedWidth, trimmedHeight); 

      //Define New Canvas Parameters 
      copyOfContext.canvas.width = longestDimension; 
      copyOfContext.canvas.height = longestDimension; 
      copyOfContext.putImageData(trimmedRect, (longestDimension - trimmedWidth)/2, (longestDimension - trimmedHeight)/2); 
      copyOfContext.globalCompositeOperation = "source-out"; 
      copyOfContext.fillStyle = "#fff"; 
      copyOfContext.fillRect(0, 0, longestDimension, longestDimension); 

      //Define Resized Context 
      var resizedContext = c.getContext('2d'); 
      resizedContext.canvas.width = 32; 
      resizedContext.canvas.height = 32; 
      resizedContext.drawImage(copyOfContext.canvas, 0, 0, 32, 32); 

      //Get Cropped Image URL 
      var croppedImageURL = resizedContext.canvas.toDataURL("image/jpeg"); 

      //Open Image in New Window 
      window.open(croppedImageURL, '_blank'); 

Answer 1

Как сделать «резервную» копию html5 холст:

var theCopy=copyCanvas(originalCanvas); 

function copyCanvas(originalCanvas){ 
    var c=originalCanvas.cloneNode(); 
    c.getContext('2d').drawImage(originalCanvas,0,0); 
    return(c); 
} 

Сделайте резервную копию исходного холста вы не хотите пострадавших. Затем после того, как вы изменили оригинал, но хотите, чтобы исходное содержимое было возвращено ...

// optionally clear the canvas before restoring the original content 

originalCanvasContext.drawImage(theCopy,0,0);