应用CSS后保存画布/图片

Question

我有一个简单的画布，上面有一张图片（图片大小为500 x 333）：

<canvas id="capEdit" width="500" height="333"></canvas>

我使用CSS在画布/图像上进行简单的水平翻转，效果完美。

.flipH { 
    -moz-transform: scale(-1, 1); 
    -webkit-transform: scale(-1, 1); 
    -o-transform: scale(-1, 1); 
    transform: scale(-1, 1); 
    filter: 
    FlipH; 
}

我现在正在尝试将画布上的图像以其翻转状态保存，但它只保存原始图像，这是我的尝试：

$(document).on("click", "#applyFlip", function() { // save
        var canvas  = document.getElementById("capEdit");
        var dataUrl = canvas.toDataURL();
        $.ajax({ 
            type: "POST", 
            url: '/ajax/saveFlip.php',
            dataType: 'text',
            data: {
                base64data : dataUrl,
                imgName : imgName
            }
        }); 
    });

问题：这个应该可以工作吗？如果可以，为什么不行？如果连这样都不行，有没有实现这些结果的方法？基本上，是水平和垂直翻转以及旋转，然后保存。

- StudioTime

Answer 1

问题在于当你使用CSS时，你并没有真正地对图像进行转换，只是视觉上的变化。你需要实际转换图像的画布上下文。

这里有一个相当不错的解释：http://davidwalsh.name/convert-canvas-image。

function convertImageToCanvas(image) {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext("2d").drawImage(image, 0, 0);

    return canvas;
}

使用getContext方法在Canvas中绘制图像后，您可以使用画布方法应用变换、旋转、平移等操作，而不是使用CSS。如果您使用CSS更改它，那么您只是编辑了其在浏览器中的外观，而没有实际操作像素数据。您需要在实际绘制图像之前执行以下操作：

  // translate context to center of canvas
  context.translate(canvas.width / 2, canvas.height / 2);

  // rotate 180 degrees clockwise
  context.rotate(Math.PI);

这个问题的范围有点超出了解释canvas是如何工作的，但是可以查看Canvas API来确定如何转换你的上下文。一旦你在上下文中有了图像，转换上下文应该就足够简单了 :)

一旦你的canvas图像显示出你想要的效果，你需要从中获取一个数据URI（新图像）并将其传递给你的saveFlip.php函数。

// Converts canvas to an image
function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
}

- imjared

Answer 2

我认为这很正常，它不会工作，你看到的图片是渲染版本，不影响原始文件。

检查一下这个，可能会对你有所帮助：

http://www.nihilogic.dk/labs/canvas2image/

- Maresh