Canvas setTransform() 剪切图像

Question

我正在制作一个数字绘图工具，它使用 setTransform() 函数来 distort/skewer 用户绘制的给定数字并下载它们。目前，在 canvas.

上绘制新图像之前，图像似乎还没有被清除出框架。

这是我的意思的一个例子：

目标：

下面是处理图片和下载图片的相关代码：

function save(number) {
    for(let i = -0.2; i <= 0.2; i += 0.05) {
        for(let j = -0.2; j <= 0.2; j += 0.05) {
            for(let k = 0.9; k <= 1.05; k += 0.05){
                for(let l = 0.9; l <= 1.05; l += 0.05){
                    temp2canvas.getContext('2d').setTransform(k, i, j, l, 0, 0);

                    temp2canvas.getContext('2d').clearRect(0, 0, temp2canvas.width, temp2canvas.height);
                    tempcanvas.getContext('2d').clearRect(0, 0, tempcanvas.width, tempcanvas.height);

                    document.getElementById("canvasimg").style.border = "2px solid";

                    temp2canvas.getContext('2d').drawImage(canvas, 0, 0, canvas.width, canvas.height, 10, 10, 102, 102);
                    tempcanvas.getContext('2d').drawImage(temp2canvas, 0, 0, temp2canvas.width, temp2canvas.height, 0, 0, 28, 28);

                    var dataURL = tempcanvas.toDataURL();
                    document.getElementById("canvasimg").src = dataURL;
                    zip.file(number + "\" + count + ".png", document.getElementById("canvasimg").src.replace(/^data:image\/(png|jpg);base64,/, ""), {base64: true});
                    count++;
                }
            }
        }
    }
}

function done() {
    zip.generateAsync({type:"blob"})
    .then(function(blob) {
        saveAs(blob, "data.zip");
    });
}

我使用 JSZip and FileSaver.js 库将文件保存为 zip 文件并下载。

怎么了？

Answer 1

当您调用 clearRect() 时转换仍然有效，因此清除矩形本身已被转换并且可能不会覆盖 canvas 的整个区域。

在清除 canvas:

之前，只需将变换矩阵重置为单位矩阵

function save(number) {
    const ctx = temp2canvas.getContext('2d');
    ctx.font = "20px sans-serif";
    for(let i = -0.2; i <= 0.2; i += 0.05) {
        for(let j = -0.2; j <= 0.2; j += 0.05) {
            for(let k = 0.9; k <= 1.05; k += 0.05){
                for(let l = 0.9; l <= 1.05; l += 0.05){
                    // reset to identity matrix
                    ctx.setTransform(1, 0, 0, 1, 0, 0);
                    // clear everything
                    ctx.clearRect(0, 0, temp2canvas.width, temp2canvas.height);
                    // now set the new matrix
                    ctx.setTransform(k, i, j, l, 0, 0);

                    ctx.fillText( number, 20, 20 );
                    temp2canvas.toBlob((blob) => {
                      document.body.appendChild(new Image())
                        .src = URL.createObjectURL( blob );
                    });
                }
            }
        }
    }
}
save(1);

<canvas id="temp2canvas" width="50" height="50"></canvas><br>

Canvas setTransform() 剪切图像

Canvas setTransform() cuts image

html

javascript

html5-canvas