複数の画像をドラッグアンドドロップできるCanvas要素を持つWebページを作成しました。また、キャンバスにドロップされたすべての画像の単一の画像を生成することもできました。このサイトの助けを借りて、私はJavascriptでこれを行うことができましたが、ブラウザ間で問題が発生しました-Chromeでのみ完全に機能します。caniuse.com/#search=canvas。
これは私がCanvas画像を生成するために使用したものです：
function convertCanvasToImage() {
var canvas = document.getElementById('canvas');
var image_src = canvas.toDataURL("image/png");
window.open(image_src);
}
これにより、画像を含む新しいウィンドウが開きます（画像をドラッグアンドドロップします）。
クロスブラウザの問題のため、Chrome、IE、Safari、FFで動作するJavascript、HTML、JQueryを使用して動作するように探していたさまざまな機能をサポートするようにページを再構築することができました。Canvas要素は使用されていません。
再作成されたページは、Canvasの代わりに画像がドロップされるDivを使用します。
これらの複数のドロップされた画像から単一の画像を生成し、ボタンを介してHDDに保存するにはどうすればよいですか？つまり、すべての画像をDivにドラッグアンドドロップしたら、[保存]ボタンをクリックして、Div内のすべての画像の現在の場所を単一のPNGとしてダウンロードできるようにします。
驚いたことに、これまでの検索で見つけた最も近いものは、何年も前の独自のdollmakerscriptであり、私が見ることができるものからJavascriptとPHPを使用しています。私がここや他の場所で見つけたほとんどすべては、Canvasまたはオンラインスナップショットサービスを参照しているようです。
新しいページのここhttp://jsfiddle.net/babakt/hvXUK/でJSFiddleを作成しました。下部の「bktone」は、JSFiddleにない画像のフォルダーを参照しているため、壊れています。使用される背景画像が変更されます。
ありがとう。