Redimensionnement de l'image sans affecter le style de la toile d'origine

Question

J'ai une toile où un utilisateur dessine. Après avoir appuyé sur un bouton, je fais quelques choses dans une seconde toile, comme couper l'espace blanc et recentrer le dessin (de manière à ne pas affecter la toile d'origine).

Je crée également une troisième toile afin que je puisse redimensionner la sortie à une certaine taille. Mon problème est que je ne veux pas que la toile d'origine où les utilisateurs dessinent soit affectée. En ce moment, tout fonctionne et mon image est redimensionnée, tout comme la toile d'origine. Comment laisser la toile d'origine inchangée?

Voilà ma fonction:

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

Comment faire un « rechange » copie d'une toile html5:

var theCopy=copyCanvas(originalCanvas); 

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

Faites une copie de secours de la toile d'origine que vous ne voulez pas affecté. Ensuite, après que vous avez modifié l'original, mais que vous voulez récupérer le contenu original ...

// optionally clear the canvas before restoring the original content 

originalCanvasContext.drawImage(theCopy,0,0);