javascriptで、画面に表示せず画像を合成できるか
javascriptで、画面に表示せず画像を合成できるか 画像を3枚重ねて保存したいと思っています。 ローカルのHTMLファイルを表示し、javascriptを読ませることはできますが 画面に特になにも表示せず ローカルにある、1.png、2.png、3.png を重ねて それをローカルの同じ場所に4.pngとして保存することはできないでしょうか。
JavaScript・75閲覧
ベストアンサー
■■■ 可能？不可能？ ■■■ （１）ローカルの HTML ファイルで ⇒ ×不可能 （２）画面に特になにも表示せず ⇒ ○可能 （３）ローカルにある「1.png」「2.png」「3.png」 を重ねて ⇒ ○可能 （４）ローカルの同じ場所に ⇒ ×不可能 （５）4.pngとして保存 ⇒ ○可能 HTML ドキュメントで複数の画像ファイルを読み込んで、 それを重ね合わせて一つにする合成は、 <canvas> 要素を使うことで可能になる。 <canvas> 要素は、 Javascript で動的に生成し、 <body> についかしなければ表示されないんで、 ページには何も表示せず裏で合成することも可能。 <canvas> で重ねた画像は、 Javascript でデータ URL に変換したものを、 動的に生成した <a> 要素の href にセットして、 Javascript の click() で強制的にクリックすれば、 ダウンロードさせることも可能。 ただし、 ローカル環境に置いてある HTML ファイルでは、 セキュリティ上の制限から、 <canvas> で重ね合わせた画像からデータ URL を取得できない。 HTML ファイルをサーバーに置いて、 http プロトコルでアクセスすれば取得できる。 また、 ダウンロードさせる際、 保存先は Javascript で勝手に操作することはできず、 ページを開いているブラウザの設定と閲覧者の操作に委ねられるんで、 読込んだ動画と同じディレクトリに保存することは不可能。 ■■■ 実施例 ■■■ 以上の制約を踏まえたうえで、 実際の Javascript のソースコード全体の実施例を示す。 ──────────────── window.addEventListener( "DOMContentLoaded", ()=> { /* ==== 重ねる画像のファイルパスのリスト ==== */ const images = [ "1.png", "2.png", "3.png" ]; /* ==== 各画像ファイルのロード完了リスト ==== */ const loaded = new Array( images.length ); /* ==== 画像オブジェクト ==== */ const imgs = Array.from( new Array( 3 ), img => new Image() ); /* ==== 画像読み込み ==== */ imgs.forEach( ( img, idx )=> { loaded[ idx ] = new Promise( resolve => { img.src = images[ idx ]; img.onload = resolve; } ); } ); /* ==== 画像がすべて読み込み終わったら実行 ==== */ Promise.all( loaded ).then( ()=> { //----] キャンバスを用意 const cvs = document.createElement( "canvas" ); cvs.width = imgs[ 0 ].width; cvs.height = imgs[ 1 ].height; const ctx = cvs.getContext( "2d" ); //----] キャンバスに画像を重ねて描画 imgs.forEach( img => { ctx.drawImage( img, 0, 0, cvs.width, cvs.height ); } ); //----] 画像をデータ URL でダウンロード const a = document.createElement( "a" ); a.href = cvs.toDataURL( "image/png" ); a.download = "result.png"; a.click(); } ); }, false ); ────────────────
1人がナイス！しています
質問者からのお礼コメント
ありがとうございました！
お礼日時：1/26 9:36
