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

Question

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

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

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

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

Answer 1

Я знаю, что это старый вопрос, и OP нашел обходное решение, но это сработает, если изображения и холст уже являются частью 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

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

Answer 3

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

Answer 4

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

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

изображение 1:

изображение 2:

изображение 3:

Результат:

Доступный для выполнения Пример:

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 5

Возможно, если бы это была пара файлов JPG, находящихся под вашим контролем, с размером, кратным 8 в обоих направлениях.Это не потребовало бы перекодирования, просто перетасовки блоков пикселей.

Answer 6

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