应用css后保存画布/图像

问题描述

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

I have a simple canvas with an image on it (image 500x333):

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

然后我使用CSS在画布/图像上应用简单的水平翻转，效果很好

I then apply a simply horizontal flip on the canvas/image using CSS, works perfectly

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

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

I'm now trying to save the image on the canvas WITH its flipped state, but it only saves the original image, here's what I'm trying:

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

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

QUESTIONS: Should this work? If so, why does this not? If it CAN'T even work like this, is there a way to achieve these results? Basically, horizontal & vertical flipping and rotating, then saving

推荐答案

这里的问题是当你使用CSS时，你实际上并没有转换图像视觉上除外。你需要实际转换图像的画布上下文。

The issue here is that when you use CSS, you're not actually transforming the image except visually. You need to actually transform the canvas context of the image.

这是一个很好的解释：

Here's a pretty good explanation: 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;
}

使用在Canvas中绘制图像后getContext 方法，您可以然后应用变换，旋转，翻译，使用canvas方法，而不是CSS。如果你用CSS改变它，你只是在浏览器中编辑它的外观，你实际上并没有操纵像素数据。在实际绘制图像之前，您需要执行以下操作：

Once you have the image drawn in Canvas using the getContext method, you can then apply transforms, rotates, translates, whatever using the canvas methods, not CSS. If you change it with CSS, you're only editing its appearance in the browser, you're not actually manipulating pixel data. You'd need to do something like this before actually drawing the image:

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

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

这个问题的范围有点超出了解决画布如何工作的问题但是看看Canvas api如何改变你的背景。一旦你在上下文中有了图像，转换上下文应该很容易：）

It's a bit out of the scope of this question to explain how canvas works but look at the Canvas api for how exactly to transform your context. Once you have the image in the context, transforming the context should be easy enough :)

一旦你的画布图像出现你想要的样子，你就需要了从中获取数据URI（新图像）并将 传递给 saveFlip.php 函数。

Once you get your canvas image to appear how you want it, you'll need to get a data URI from it (the new image) and pass that to your saveFlip.php function.

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

这篇关于应用css后保存画布/图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！