我有一个简单的画布,上面有一张图片(图片大小为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
}
});
});
问题:这个应该可以工作吗?如果可以,为什么不行?如果连这样都不行,有没有实现这些结果的方法?基本上,是水平和垂直翻转以及旋转,然后保存。