前提・実現したいこと
実現したいことは、選択した画像ファイルの上に文字を書きたいです。
実際にできていることは下のコードのもので画像表示と表示した画像をクリアすることができます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <script> window.onload = () => { const file = document.getElementById('file'); const canvas = document.getElementById('canvas'); const deleteImg = document.getElementById("delete"); let drawing = false; let before_x = 0; let before_y = 0; const canvasWidth = 500; const canvasHeight = 500; let uploadImgSrc; canvas.width = canvasWidth; canvas.height = canvasHeight; const ctx = canvas.getContext('2d'); function loadLocalImage(e) { const fileData = e.target.files[0]; if (!fileData.type.match('image.*')) { alert('画像を選択してください'); return; } const reader = new FileReader(); reader.onload = function () { uploadImgSrc = reader.result; canvasDraw(); } reader.readAsDataURL(fileData); } file.addEventListener('change', loadLocalImage, false); function canvasDraw() { ctx.clearRect(0, 0, canvasWidth, canvasHeight); const img = new Image(); img.src = uploadImgSrc; img.onload = function () { ctx.drawImage(img, 0, 0, canvasWidth, this.height * (canvasWidth / this.width)); } } deleteImg.addEventListener("click", () => { ctx.clearRect(0, 0, canvasWidth, canvasHeight); file.nodeValue = ""; }) } </script> </head> <body> <div class="upload"><input type="file" name="file" id="file"><button id="delete">画像のクリア</button></div> <div id="box"><canvas id="canvas"></canvas> </body> </html>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。