Можете ли вы объединить несколько изображений в один, используя JavaScript?

Мне интересно, есть ли способ объединить несколько изображений в одно изображение, используя только JavaScript. Это то, что Canvas сможет сделать. Эффект можно сделать с помощью позиционирования, но можете ли вы объединить их в одно изображение для загрузки?

Обновление от 1 октября 2008 года:

Спасибо за совет, я помогал кому-то работать на сайте js/css только с jQuery, и они надеялись, что некоторые изображения MacOS похожи на изображения с несколькими изображениями, которые накладываются друг на друга. Решение, которое мы придумали, было просто абсолютным позиционированием и с использованием эффекта относительно родительского <div> относительно позиционированного. Было бы намного проще объединить изображения и создать эффект для этого единственного изображения.

Затем я подумал о редакторах онлайн-изображений, таких как Picnik и задался вопросом, может ли быть редактор изображений на основе браузера с возможностями Photoshop только в javascript. Наверное, это не возможность, может быть, в будущем?

ОТВЕТЫ

Ответ 1

Я знаю, что это старый вопрос, и ОП нашел обходное решение, но это сработает, если изображения и холст уже являются частью HTML-страницы.

<img id="img1" src="imgfile1.png">
<img id="img2" src="imgfile2.png">
<canvas id="canvas"></canvas>

<script type="text/javascript">
var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

canvas.width = img1.width;
canvas.height = img1.height;

context.globalAlpha = 1.0;
context.drawImage(img1, 0, 0);
context.globalAlpha = 0.5; //Remove if pngs have alpha
context.drawImage(img2, 0, 0);
</script>

Или, если вы хотите загрузить изображения на лету:

<canvas id="canvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var img1 = new Image();
var img2 = new Image();

img1.onload = function() {
    canvas.width = img1.width;
    canvas.height = img1.height;
    img2.src = 'imgfile2.png';
};
img2.onload = function() {
    context.globalAlpha = 1.0;
    context.drawImage(img1, 0, 0);
    context.globalAlpha = 0.5; //Remove if pngs have alpha
    context.drawImage(img2, 0, 0);
};        

img1.src = 'imgfile1.png';
</script>

Ответ 2

Я не думаю, что вы можете или захотите сделать это с помощью javascript на стороне клиента ( "расчесывая их в одно изображение для загрузки" ), потому что он работает на клиенте: даже если вы могли бы объединить их в одно изображение файл на клиенте, в этот момент вы уже загрузили все отдельные изображения, поэтому слияние бессмысленно.

Ответ 4

MarvinJ предоставляет метод комбинироватьByAlpha(), в котором объединяются несколько изображений с использованием его альфа-канала. Поэтому вам просто нужно иметь изображения в формате, поддерживающем прозрачность, например PNG, и использовать этот метод следующим образом:

Marvin.combineByAlpha(image, imageOver, imageOutput, x, y);

image1:

enter image description here

image2:

enter image description here

image3:

enter image description here

Результат:

enter image description here

Пример выполнения:

var canvas = document.getElementById("canvas");
image1 = new MarvinImage();
image1.load("https://i.imgur.com/ChdMiH7.jpg", imageLoaded);
image2 = new MarvinImage();
image2.load("https://i.imgur.com/h3HBUBt.png", imageLoaded);
image3 = new MarvinImage();
image3.load("https://i.imgur.com/UoISVdT.png", imageLoaded);

var loaded=0;

function imageLoaded(){
  if(++loaded == 3){
    var image = new MarvinImage(image1.getWidth(), image1.getHeight());
    Marvin.combineByAlpha(image1, image2, image, 0, 0);
    Marvin.combineByAlpha(image, image3, image, 190, 120);
    image.draw(canvas);
  }
}
<script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script>
<canvas id="canvas" width="450" height="297"></canvas>

Ответ 5

Ну, проблема в том, что вы не можете "загрузить" с JavaScript, это не имеет особого смысла, поскольку JavaScript работает на клиенте, и имеет смысл загружаться с сервера. Можете ли вы рассказать нам, чего вы пытаетесь достичь, своей конечной целью? Мы могли бы придумать лучшие предложения.

Ответ 6

Если бы они были парой JPG, под вашим контролем, вероятно, с размером, кратным 8 в обоих направлениях. Это не требует перекодировки, просто перетаскивая пиксельные блоки.