6

我有一个带有图像的简单画布（图像 500x333）：

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

问题：这应该工作吗？如果是这样，为什么不呢？如果它甚至不能像这样工作，有没有办法实现这些结果？基本上，水平和垂直翻转和旋转，然后保存

4

2 回答 2

4

这里的问题是，当您使用 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 中绘制了图像，您就可以使用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 api 以了解如何准确地转换您的上下文。在上下文中获得图像后，转换上下文应该很容易:)

一旦您的画布图像以您想要的方式显示，您需要从中获取数据 URI（新图像）并将其传递给您的saveFlip.php函数。

// Converts canvas to an image
function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
}
于 2013-06-10T15:01:04.397 回答
-1

我认为它不起作用是正常的，您看到的图像是渲染版本，它不会影响原始版本。

检查这个，它可能会帮助你：

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

于 2013-06-10T14:00:38.217 回答