应用css后保存canvas/图像
我有一个带有图像的简单canvas（图片500×333）：
然后我使用CSS在canvas/图像上应用一个简单的水平翻转，完美地工作
.flipH { -moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); transform: scale(-1, 1); filter: FlipH; }
我现在正试图将图像保存在canvas上，并显示其翻转状态，但它只保存了原始图像，这就是我正在尝试的内容：
$(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 } }); });
问题：这应该有用吗？ 如果是这样，为什么不呢？ 如果它甚至不能像这样工作，有没有办法实现这些结果？ 基本上，水平和垂直翻转和旋转，然后保存
这里的问题是，当你使用CSS时，你实际上并没有在视觉上转换图像。 您需要实际转换图像的canvas上下文。
这是一个很好的解释： 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如何工作有点超出了这个问题的范围，但是看看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; }