Как встроить небольшое изображение поверх другого изображения и сохранить его с помощью JavaScript? - PullRequest
Новая
       13

Как встроить небольшое изображение поверх другого изображения и сохранить его с помощью JavaScript?

3 голосов
/ 06 декабря 2011

У меня есть большое изображение формата tif и два маленьких изображения.

Чего я хотел добиться, так это того, что я хочу встроить одно из двух небольших изображений поверх большого изображения и сохранить его с помощью JavaScript. 

 <html>
    <body>
        <img src="largeimg" />
        <p>Select the image to embed on the large image</p>
        <img src="smallimg1" />
        <img src="smallimg2" />
    </body>
 </html>

Есть ли способ достичь вышеизложенного с помощью JavaScript?

1 Ответ

3 голосов
/ 06 декабря 2011

Если изображения имеют одинаковое происхождение, можно использовать холст.

  • рисовать изображения на canvas
  • , звонить canvas.toDataURL()чтобы извлечь данные изображения
  • , создать элемент img и добавить к нему данные

Пример:

HTML: 

<img id="main" src="image1" />
<img class="small" src="image2" data-posx="0" data-posy="0" />
<img class="small" src="image3" data-posx="50" data-posy="50" />
<div id="result"></div>

JavaScript: 

function process(main, rest) {
  var canvas = document.createElement("canvas");
  canvas.width = main.width;
  canvas.height = main.height;

  var ctx = canvas.getContext("2d");
  ctx.drawImage(main, 0, 0);

  for (var i = 0; i < rest.length; i++) {
    var img = rest[i];
    ctx.drawImage(img, img.getAttribute("data-posx"), img.getAttribute("data-posy"));
  }

  return canvas.toDataURL("image/png");
}

var img = document.createElement("img");
img.src = process(document.getElementById("main"),  document.getElementsByClassName("small"));
document.getElementById("result").appendChild(img);

Если вы хотите записать изображение по [0, 0] координатам, то вам, конечно, не нужно использовать data- атрибуты.Проблема этого подхода заключается в том, что если файлы размещены в другом источнике, toDataURL выдаст ошибку безопасности.

На основе: https://stackoverflow.com/a/934925/1011582

Примечание: Iхотел бы связать пример jsfiddle или jsbin, но из-за той же политики происхождения я не могу создать какой-либо разумно выглядящий пример.Есть идеи?

ЭТО - лучший пример, который мне удалось получить (протестировано с Chrome и FF).

...