元のキャンバスの外観に影響を与えずにイメージのサイズを変更しますか？

Question

私はユーザーが描画するキャンバスを持っています。ボタンをタップした後、空白を取り除き、元のキャンバスに影響を与えないように図面を再センタリングするなど、2番目のキャンバスでいくつか行います。

出力を特定のサイズにリサイズできるように、3番目のキャンバスも作成します。私の問題は、ユーザーが描画する元のキャンバスが影響を受けないようにすることです。今はすべてが機能し、イメージのサイズは変更されますが、元のキャンバスも変更されます。元のキャンバスを影響を受けないままにする方法は？ここで

は私の機能です：

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