前提・実現したいこと
ブラウザ:IE、chrome
html5のcanvasを使い、複数の画像をcanvasに配置してドラッグ&ドロップで自由に配置した後、画像として保存したいです。
具体的には、
↑の画像のように、下地の画像の上に、画像化した文字や画像を配置していきます。
試したこと
このサイトの「Step3: 画像をドラッグで移動させる」を参考にし、ひとつの画像をドラッグ&ドロップして自由に配置することはできました。(chromeのみ)
発生している問題
・「試したこと」で記載したサイトの「Step3: 画像をドラッグで移動させる」の以下のjavascriptコード部分を、画像一つ一つに定義する必要があるのか。その他もっと簡単にできる方法があれば知りたい。
・IEでも動かせるようにしたい。
html
<div id="image"> </div> <input type="button" value="canvasを表示" onclick="OnButtonClick();" />
javascript
const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const img = new Image(); /** ドラッグで移動 */ // ドラッグ状態かどうか let isDragging = false; // ドラッグ開始位置 let start = { x: 0, y: 0 }; // ドラッグ中の位置 let diff = { x: 0, y: 0 }; // ドラッグ終了後の位置 let end = { x: 0, y: 0 } function OnButtonClick() { document.getElementById('image').appendChild(canvas); img.src = 'img/sample_3.png'; //任意の画像 img.crossOrigin = 'anonymous'; // Canvasを画像のサイズに合わせる canvas.height = 1000; //任意の高さ canvas.width = 1000; //任意の幅 // Canvasに描画する ctx.drawImage(img, 0, 0); canvas.addEventListener("mousedown", function(e){ isDragging = true; start.x = event.clientX; start.y = event.clientY; }); canvas.addEventListener("mousemove", function(e){ if (isDragging) { diff.x = (event.clientX - start.x) + end.x; diff.y = (event.clientY - start.y) + end.y; redraw(); } }); canvas.addEventListener("mouseup", function(e){ isDragging = false; end.x = diff.x; end.y = diff.y; }); } function redraw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, diff.x, diff.y) }
自分が調べた限りだと、canvasでしか画像を自由配置して保存できなさそうだったので、このような質問をさせて頂きました。
よろしくお願いします。
まだ回答がついていません
会員登録して回答してみよう