Форум

Valdemor · #1 (**permalink**) 02.05.2013, 00:19

Есть у меня контекст (canvas), который нужно сохранить в png файл. Сам контекст - набор png-изображений с прозрачным фоном.
И, собственно, сабж: как сделать в контексте прозрачный фон в местах прозрачности самых изображений и как сохранить контекст в png вместе с прозрачностью фона

Aetae · #2 (**permalink**) 04.05.2013, 01:18

Canvas нормально работает с прозрачностью. Просто загрузите в него картинку как есть.
Сохранить в png в ff можно просто павой кнопкой на холсте -> сохранить как.=)
Или воспользоваться либами которые генерируют конкретные файлы из canvas - гуглятся на раз.

Valdemor · #3 (**permalink**) 04.05.2013, 01:29

Мне нужен конкретный пример. Есть в html5 функция, сохраняющая контекст. Мне нужно знать - можна ли альфа-канал также передавать?

О, меня уже цитируют? Расту

Aetae · #4 (**permalink**) 04.05.2013, 01:50

В чём проблема то?

<!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

Valdemor · #5 (**permalink**) 04.05.2013, 17:45

Мне нужно сохранить сам контекст в файл.

qwerty-клавиатура · #6 (**permalink**) 04.05.2013, 18:29

изображения с удаленного сервера нельзя попиксельно прочитать если не выставлены соотвт заголовки

qwerty-клавиатура · #7 (**permalink**) 04.05.2013, 18:31

или вообще нельзя

qwerty-клавиатура · #8 (**permalink**) 04.05.2013, 18:33

http://vk.com/app3568475 на смотри мое приложение. там изображение браузер генерирует а сохранить его можно php(методом PUT передать данные и записать в файл)

qwerty-клавиатура · #9 (**permalink**) 04.05.2013, 18:43

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') );

?>

qwerty-клавиатура · #10 (**permalink**) 04.05.2013, 19:03

http://x9a.ru/samples/save.htm

Форум

Справочник

Discord чат

Курсы javascript