Объединить изображение с помощью Javascript

Question

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

Например, если у вас есть 2 прямоугольных файла изображений.jpg или.png одинакового размера, возможно ли совместить их рядом и создать объединенную копию этих двух файлов в новом файле изображений.jpg или.png?

Answer 1

Вы можете использовать JavaScript, чтобы "объединить" их в один холст и преобразовать этот холст в изображение.

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imageObj1 = new Image();
var imageObj2 = new Image();
imageObj1.src = "1.png"
imageObj1.onload = function() {
   ctx.drawImage(imageObj1, 0, 0, 328, 526);
   imageObj2.src = "2.png";
   imageObj2.onload = function() {
      ctx.drawImage(imageObj2, 15, 85, 300, 300);
      var img = c.toDataURL("image/png");
      document.write('<img src="' + img + '" width="328" height="526"/>');
   }
};

Из-за безопасности ваши два изображения должны находиться в одном домене с вашим файлом JavaScript (т.е. http://123.com/1.png, http://123.com/2.png а также http://123.com/script.js) иначе функция toDataURL() возникнет ошибка.

Answer 2

Обновление для 2019/2020+: для этого есть отличный пакет npm под названием merge-images

И пользоваться им очень просто!

import mergeImages from 'merge-images';

mergeImages(['/body.png', '/eyes.png', '/mouth.png'])
  .then(b64 => document.querySelector('img').src = b64);
  // data:image/png;base64,iVBORw0KGgoAA...

Вы можете дополнительно настроить его с помощью позиционирования, непрозрачности (как для каждого изображения) и размеров вывода!

(Никакого отношения к этому пакету не имеет, я потратил 3 дня на получение html2canvas поработать и тут нашел эту палочку-выручалочку!)

Answer 3

Huỳnh Quốc Phong частично прав:

Вы можете использовать Canvas для объединения изображений. Но они могут происходить из других доменов. Просто загрузите фотографии в вашем доме. Как только изображения загружены (это можно проверить с помощью javascript, см. Ниже), вы можете использовать их на своем холсте.

var canvas = canvasBuild.getContext('canvasObj');
var img = document.getElementById('mergePic1');
canvas.drawImage(img, 0, 0);

Чтобы проверить, были ли загружены изображения, я бы порекомендовал использовать плагин jQuery http://desandro.github.io/imagesloaded/ но это также можно сделать и без него.

Answer 4

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

Я создал скрипку ( http://jsfiddle.net/davidwalton/4pjreyfb/6/), которая основана на этом:

Как сделать простую загрузку изображений с использованием Javascript/HTML

Затем я добавил логику Huỳnh Quốc Phong выше ( слияние изображений с использованием Javascript):

HTML:

<input class="file1" type="file" data-image-selector=".image1" />
<input class="file2" type="file" data-image-selector=".image2" />
<br />
<img class="image1 hidden" alt="medium image 1" />
<img class="image2 hidden" alt="medium image 2" />
<br />
<input class="btn-merge" type="button" value="Merge!" />
<br />
<img class="merged-image hidden" alt="merged image" />
<canvas id="canvas" class="hidden"></canvas>

JS:

$('.file1, .file2').on('change', function() {
  var reader = new FileReader(),
    imageSelector = $(this).data('image-selector');

  if (this.files && this.files[0]) {
    reader.onload = function(e) {
      imageIsLoaded(e, imageSelector)
    };
    reader.readAsDataURL(this.files[0]);
  }
});

$('.btn-merge').on('click', merge);

function imageIsLoaded(e, imageSelector) {
  $(imageSelector).attr('src', e.target.result);
  $(imageSelector).removeClass('hidden');
};

function merge() {
    var canvas = document.getElementById('canvas'),
            ctx = canvas.getContext('2d'),
      imageObj1 = new Image(),
      imageObj2 = new Image();

    imageObj1.src = $('.image1').attr('src');
  imageObj1.onload = function() {
    ctx.globalAlpha = 1;
    ctx.drawImage(imageObj1, 0, 0, 328, 526);
    imageObj2.src = $('.image2').attr('src');;
    imageObj2.onload = function() {
        ctx.globalAlpha = 0.5;
      ctx.drawImage(imageObj2, 15, 85, 300, 300);
      var img = canvas.toDataURL('image/jpeg');
      $('.merged-image').attr('src', img);
      $('.merged-image').removeClass('hidden');
    }
  };
}

Кроме того, он включает в себя немного прозрачности, чтобы можно было использовать два JPEG.

Обратите внимание, что все расположение и размеры изображения управляются через ctx.drawImage() функции. Демо будет некрасиво, но это должно доказать концепцию.:)

Надеюсь, это полезно!

Answer 5

Вы можете использовать библиотеку Pixastic JavaScript для объединения, фильтрации и смешивания нескольких изображений. http://www.pixastic.com/lib/docs/actions/blend/

Но это работает только в современных браузерах, которые поддерживают Canvas-элемент. К сожалению, IE8 не поддерживает это.

Answer 6

Нет, ты не можешь этого сделать.

С помощью некоторой магии css/html, которую вы можете сделать, вы увидите, что слились.

---

Если вы хотите, чтобы они действительно объединились, я бы предложил Photoshop.

Или вы можете иметь некоторый код сервера для создания и объединения изображений для вас.