Html5. Canvas. Png. Alpha
Есть у меня контекст (canvas), который нужно сохранить в png файл. Сам контекст - набор png-изображений с прозрачным фоном.
И, собственно, сабж: как сделать в контексте прозрачный фон в местах прозрачности самых изображений и как сохранить контекст в png вместе с прозрачностью фона:help: :help: :help: |
Canvas нормально работает с прозрачностью. Просто загрузите в него картинку как есть.
Сохранить в png в ff можно просто павой кнопкой на холсте -> сохранить как.=) Или воспользоваться либами которые генерируют конкретные файлы из canvas - гуглятся на раз. |
Мне нужен конкретный пример. Есть в html5 функция, сохраняющая контекст. Мне нужно знать - можна ли альфа-канал также передавать?
О, меня уже цитируют? Расту :lol: :thanks: |
В чём проблема то?
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<style type="text/css">
*{padding:0;margin:0;}
html,body{
width:100%;
height:100%;
background: rgb(157,213,58);
background: linear-gradient(135deg, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
}
</style>
</head>
<body>
<script type="text/javascript">
var img = new Image();
img.onload = goCanvas;
img.src = 'http://dobrochan.ru/src/png/1009/nya.png';
function goCanvas(){
var d = document,
canvas = d.createElement('canvas'),
ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
d.body.appendChild(canvas)
}
</script>
</body>
</html>
Или нужна нужна маска? http://learn.javascript.ru/play/Lf6nqb |
Мне нужно сохранить сам контекст в файл.
|
изображения с удаленного сервера нельзя попиксельно прочитать если не выставлены соотвт заголовки
|
или вообще нельзя
|
http://vk.com/app3568475 на смотри мое приложение. там изображение браузер генерирует а сохранить его можно php(методом PUT передать данные и записать в файл)
|
HTMLCanvasElement.prototype.toBlob = function(type, quality) {
var dataURL = this.toDataURL(type, quality),
binary = atob( dataURL.substr( dataURL.indexOf(',') + 1 ) ),
i = binary.length,
view = new Uint8Array(i);
while (i--) {
view[i] = binary.charCodeAt(i);
}
return new Blob([view], {type: type});
};
var blob = document.getElementById('mycanvas').toBlob();
// отправляем методом PUT с помощью ajax на save_image.php
save_image.php <?php $_SERVER['REQUEST_METHOD'] == 'PUT' || die; file_put_contents( 'image.png', file_get_contents('php://input') ); ?> |
|
| Часовой пояс GMT +3, время: 14:55. |