Можете ли вы объединить несколько изображений в одно с помощью JavaScript?

Question

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

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

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

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

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

Answer 2

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

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

image1:

image2:

image3:

Результат:

Runnable Пример:

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>

Answer 3

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

Answer 4

Вы можете использовать Pixastic для этого. Пример смешивания находится здесь: http://www.pixastic.com/lib/docs/actions/blend/

Answer 5

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

Answer 6

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