在不影响原始画布外观的情况下调整图像大小？答案

【问题标题】：Resizing Image Without Affecting Look of Original Canvas?在不影响原始画布外观的情况下调整图像大小？
【发布时间】：2016-05-02 10:47:30
【问题描述】：

我有一个用户在其中绘制的画布。点击一个按钮后，我在第二个画布中做一些事情，例如修剪空白和重新居中绘图（以免影响原始画布）。

我还创建了第三个画布，以便将输出调整为特定大小。我的问题是我不希望用户绘制的原始画布受到影响。现在一切正常，我的图像已调整大小，但原始画布也是如此。如何不影响原始画布？

这是我的功能：

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

【问题讨论】：

我看你明白canvas#1可以是canvas#2的drawImage源。你为什么不复制你不想受影响的画布？
我尝试通过将 resizedContext 设置为 copyOfContext 来做到这一点，但它输出了一个完全黑色的图像。

标签： javascript jquery html canvas sketch.js

【解决方案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);

【讨论】：