Привет. Делаю простенький редактор изображений для себя. Сделал, чтобы при изменении слайдеров менялись свойства у изображения, но есть проблема при сохранении. Когда изображение сохраняется, оно сохраняется без стилей. Как я делаю.
1) Получаю изображение по id тега
2) Рисую его на канвасе.
3) Конвертирую c помощью toDataUrl.
4) Изменение стилей не сохраняется.
Вот код:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Фото едитор </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/foundation.min.css">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/vendor/modernizr.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/fastclick.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/photo.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
</head>
<body>
<img id="image1" src="./img/lusy-portret-ochki-makiyazh.jpg" hidden/><br>
<canvas id="myCanvas"></canvas>
<script>
</script>
<script src="js/photo.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/fastclick.js"></script>
<script type="text/javascript">
var myCanvas = document.getElementById("myCanvas");
var img = document.getElementById("image1");
var ctx = myCanvas.getContext ? myCanvas.getContext('2d') : null;
ctx.drawImage(img,0,0);
// filters
var grayValue = "0.2";
var blurValue = "1px";
var brightnessValue = "150%";
var saturateValue = "0.2";
var contrastValue = "0.2";
var sepiaValue = "0";
// `filterVal`
var filterVal = "grayscale(" + grayValue + ") "
+ "blur(" + blurValue + ") "
+ "brightness(" + brightnessValue + ") "
+ "saturate(" + saturateValue + ") "
+ "contrast(" + contrastValue + ") "
+ "sepia(" + sepiaValue + ")";
// set `img` `filter` to `filterVal`
$('#myCanvas')
.css({
"webkit-filter": filterVal,
"moz-filter": filterVal,
"ms-filter": filterVal,
"o-filter": filterVal
});
var img = myCanvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');
</script>
</body>
</html>
В итоге получаем вот такую картинку:
Заранее спасибо за ответы.
Простой
