web-dev-qa-db-ja.com

JavaScriptを使用して画像を結合する

JavaScriptを使用して写真をマージすることは可能ですか？

たとえば、同じサイズの2つの長方形の.jpgまたは.png画像ファイルがある場合、それらを横に並べて、新しい.jpgまたは.png画像ファイルに2つのマージされたコピーを作成できますか？

javascriptimage-processingimage-manipulation
29
footprint.

JavaScriptを使用してそれらを1つのキャンバスに「マージ」し、そのキャンバスを画像に変換できます。

_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"/>');
   }
};
_

セキュリティのため、2つの画像はJavaScriptファイルと同じドメインにある必要があります（つまり、_http://123.com/1.png_、_http://123.com/2.png_、_http://123.com/script.js_）。そうでない場合、関数toDataURL()はエラー。

48
Huỳnh Quốc Phong

HuỳnhQuốcPhongは部分的に正しい：

Canvasを使用して画像をマージできます。しかし、それらは他のドメインから発信できます。あなたのdomに写真をロードするだけです。写真が読み込まれると（javascriptで確認できます。以下を参照）、キャンバスで使用できます。

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

イメージがロードされたかどうかを確認するには、jQueryプラグインを使用することをお勧めします http://desandro.github.io/imagesloaded/ -なしでも実行できます。

9
Alex

Pixastic JavaScriptライブラリを使用して、複数の画像を結合、フィルタリング、およびブレンドできます。 http://www.pixastic.com/lib/docs/actions/blend/

ただし、これはCanvas要素をサポートしている最新のブラウザーでのみ機能します。残念ながら、IE8はこれをサポートしていません。

2
Felix Gertz

私はこれが古い投稿であることを知っていますが、私はこの質問の解決策を探して、自分でそれを見つけました。さらに、使用する画像をアップロードできるようにしたかった（サーバー側のロジックに依存する必要なし）。

私はこれに基づいてフィドル（ http://jsfiddle.net/davidwalton/4pjreyfb/6/ ）を作成しました：

Javascript/HTMLを使用して簡単な画像をアップロードする方法

次に、上記のHuỳnhQuốcPhongのロジックを追加しました（ 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');
    }
  };
}
_

さらに、2つのjpegを利用できるようにするために、少し透明性を取り入れています。

すべての画像の配置とサイズ変更は、ctx.drawImage()関数を介して管理されることに注意してください。デモはいですが、コンセプトを証明する必要があります。 :)

これが役立つことを願っています！

2
David Walton