Zapisz płótno / obraz po zastosowaniu css
Mam proste płótno z obrazem (obraz 500x333):
<canvas id="capEdit" width="500" height="333"></canvas>
Następnie stosuję po prostu poziome odwrócenie na płótnie / obrazie przy użyciu CSS, działa idealnie
.flipH {
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
filter:
FlipH;
}
Próbuję teraz zapisać obraz na płótnie Z jego odwróconym stanem, ale zapisuje on tylko oryginalny obraz, oto co próbuję:
$(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
}
});
});
PYTANIA: Czy to powinno działać? Jeśli tak, to dlaczego nie? Jeśli NIE MOŻE nawet działać w ten sposób, czy istnieje sposób na osiągnięcie tych wyników? Zasadniczo, obracanie i obracanie w poziomie i pionie, a następnie zapisywanie