保存（）和恢复（）功能不起作用？

Question

(function (canvasID, imgID) {
    "use strict";

    var canvas, ctx, myImg;  

    var initialize = function (){

        canvas = document.getElementById(canvasID);
        myImg = document.getElementById(imgID);
        ctx = canvas.getContext('2d');


    };

    var renderImg = function (x, y, w, h, img, mixImg, filter){

        if(ctx) {
            ctx.drawImage(img, x, y, w, h);
            mixImg(x, y, w, h, filter);

        }


    };

    var mixImg = function (x, y, w, h, filter){
        var r, g, b, a, v;
        var canvasData = ctx.getImageData(x, y, w, h);


        if(filter) {

            switch(filter) {
                case 'grayscale':
                    for (var i = 0; i < canvasData.data.length; i+=4){

                            r = canvasData.data[i];
                            g = canvasData.data[i+1];
                            b = canvasData.data[i+2];
                            v = 0.2126*r + 0.7152*g + 0.0722*b;
                            canvasData.data[i] = canvasData.data[i+1] = canvasData.data[i+2] = v;

                    }

                    break;
                case 'retro':
                    for (var i = 0; i < canvasData.data.length; i+=4){

                            r = canvasData.data[i];
                            g = canvasData.data[i+1];
                            b = canvasData.data[i+2];
                            a = canvasData.data[i+3];
                            canvasData.data[i] = r-40;
                            canvasData.data[i+1] = g-50;
                            canvasData.data[i+2] = b+23;
                            canvasData.data[i+3] = 200;

                    }

                    break;

                case 'instagram':
                    for (var i = 0; i < canvasData.data.length; i+=4){

                            r = canvasData.data[i];
                            g = canvasData.data[i+1];
                            b = canvasData.data[i+2];
                            canvasData.data[i] = r+63;
                            canvasData.data[i+1] = g+41;
                            canvasData.data[i+2] = 60;

                    }

                    break;

            } // end of switch
        } // end of if

        ctx.putImageData(canvasData, x, y);

    };



    window.onload = function () {

        initialize();


        if(canvas && canvas.getContext) {
            renderImg(0, 0, 250, 250, myImg, mixImg);
            ctx.save();
            renderImg(250, 0, 250, 250, myImg, mixImg, 'grayscale');
            ctx.save();
            renderImg(0, 250, 250, 250, myImg, mixImg, 'retro');
            ctx.save();
            renderImg(250, 250, 250, 250, myImg, mixImg, 'instagram');
            ctx.save();

            ctx.translate(0, 500);
            ctx.restore();


        }

    };






})('collage', 'img');

如何镜像我绘制的整个画布（我渲染的 4 个四个图像）并将其放置在 x:0 y:500 上？ 我试图保存我画的每张图像，然后在不同的点上翻译它，然后恢复它。 但除了我画的 4 张图像外，什么都没有显示。我做错了什么？？

Answer 1

translate 只改变参考点。

ctx.translate(0, 500)x = 0 之后是左上角，而y = 0 是 500 下角。

您还必须在画布中绘制或放入数据。

但是getImageData 和putImageData 不受变换矩阵的影响，所以不得不说例如：

var trans = [0, 500];

ctx.putImageData(
    canvasData,
    x + trans[0],
    y + trans[1]
);

或将数据放入内存画布并使用drawImage()。

Ref.:

当前路径、变换矩阵、阴影属性、全局 alpha、剪切区域和全局合成运算符不得影响 getImageData() 和 putImageData() 方法。

正如您现在的代码一样，您还可以在同一区域上进行绘制 + 读取 + 重绘。您可以使用一次抽签，然后将其用作所有其他抽签的来源。也不需要保存和恢复。

---

编辑：

document.createElement('CANVAS') 中的内存画布。这完全取决于如何以及出于什么目的等。可能的设置可能是。

var img = {}, memc = {}, domc = {};

img.src     = document.getElementById(imgId);
img.w       = img.src.width;
img.h       = img.src.height;

/* DOM Canvas */
domc.can    = document.getElementById(canvasId);
domc.ctx    = domc.can.getContext('2d');
domc.width  = img.w * 2; // Going to duplicate image 2 columns.
domc.height = img.h * 4; // Going to duplicate image 4 rows.

/* Memory Canvas */
memc.can    = document.createElement('CANVAS');
memc.ctx    = memc.can.getContext('2d');
memc.width  = img.w;
memc.height = img.h;