Как объединить 2 png-изображения в одно на стороне клиента с помощью javascript?
Мой код на стороне клиента получает два изображения PNG. Одно из них полупрозрачное. Как я могу наложить первое изображение на второе и преобразовать его в третий PNG файл, чтобы использовать его позже? Это похоже на использование их как слоев для создания 1 PNG-изображения. Есть ли способ сделать это или какие-нибудь фреймворки?
Это очень просто сделать. Вам просто нужно использовать drawImage для послойного рисования изображений на холсте. Что касается сохранения, вы используете toDataURL, который вернет base64 url для изображения, с которым вы можете делать что угодно, открывать в новом окне и т.д. Однако изображения должны поступать из домена, на котором запущен код, чтобы получить url данных, иначе возникнет исключение безопасности. Пример jsfiddle вызывает исключение безопасности, потому что я беру изображения с двух случайных сайтов, просто в качестве примера.
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
image = document.getElementsByTagName("img");
canvas.width = 400;
canvas.height = 400;
ctx.drawImage(image[0],0,0);
ctx.drawImage(image[1],0,0);
// will raise security exception if not from the same domain as the code.
var newImage = canvas.toDataURL();
Pixastic - это библиотека JavaScript, которая позволяет выполнять различные операции, фильтры и причудливые эффекты на изображениях, используя лишь немного JavaScript. Чтобы узнать больше о библиотеке, смотрите вводную страницу.
Основным направлением CamanJS является манипуляция изображениями с помощью HTML5 canvas и Javascript. Это сочетание простого в использовании интерфейса с продвинутыми и эффективными техниками редактирования изображений/канвы. Он также полностью независим от библиотек и может безопасно использоваться рядом с jQuery, YUI, Scriptaculous, MooTools и т.д.
