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

调整图像大小而不影响原始画布的外观？

1 个答案: