質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

595閲覧

canvasの描画結果を画像に変換したい

tonakai33

総合スコア1

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2023/03/29 13:14

ローカルの画像に特定の画像を重ねるページを作っています。
canvasを描画結果を画像に変換したいのですが、 toDataURL()をどのように用いれば良いでしょうか?

超初心者で恐縮ですが、よろしくお願いいたします。

html

1<div class="upload"><input type="file" name="file" id="file"></div> 2<canvas id="canvas"></canvas>

javascript

1 var file = document.getElementById('file'); 2 var canvas = document.getElementById('canvas'); 3 var canvasWidth = 400; 4 var canvasHeight = 400; 5 var uploadImgSrc; 6 7// Canvas 8 canvas.width = canvasWidth; 9 canvas.height = canvasHeight; 10 var ctx = canvas.getContext('2d'); 11 var img = new Image(); 12 img.src = 'https://pigg.tokyo/images/test.png'; 13 img.onload = function() { 14 ctx.drawImage(img, 0, 0); 15} 16 17 18function loadLocalImage(e) { 19 var fileData = e.target.files[0]; 20 if(!fileData.type.match('image.*')) { 21 alert('画像を選択してください'); 22 return; 23 } 24 25 var reader = new FileReader(); 26 reader.onload = function() { 27 uploadImgSrc = reader.result; 28 canvasDraw(); 29 } 30 31 reader.readAsDataURL(fileData); 32} 33 34 file.addEventListener('change', loadLocalImage, false); 35 36 37// 画像を表示 38function canvasDraw(imgSrc) { 39 ctx.clearRect(0, 0, canvasWidth, canvasHeight); 40 var img = new Image(); 41 img.src = uploadImgSrc; 42 img.onload = function() { 43 ctx.drawImage(img, 0, 0, canvasWidth, this.height * (canvasWidth / this.width)); 44 addImage(); 45 preview(); 46 } 47} 48 49// 画像を重ねる 50function addImage() { 51 ctx.drawImage(img, 0, 0); 52}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2023/03/30 03:04

質問者さん、回答がでているのでそれらに対するフィードバックを返してください。役に立った/立たなかったぐらいはすぐに返せるのでは? 役に立たなかったならどこがダメかを書くとより期待に近い回答が出てくるかも。解決したなら解決に役立った回答にベストアンサーをつけてクローズしてください。
guest

回答2

0

ベストアンサー

参考にしてください。

js

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Canvas to Image Example</title> 6 </head> 7 <body> 8 <canvas id="myCanvas" width="200" height="200"></canvas> 9 <button onclick="saveImage()">Save Image</button> 10 11 <script> 12 const canvas = document.getElementById("myCanvas"); 13 const context = canvas.getContext("2d"); 14 15 context.fillStyle = "#FF0000"; 16 context.fillRect(0, 0, 200, 200); 17 18 function saveImage() { 19 const image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 20 const link = document.createElement("a"); 21 link.download = "canvas.png"; 22 link.href = image; 23 document.body.appendChild(link); 24 link.click(); 25 document.body.removeChild(link); 26 } 27 </script> 28 </body> 29</html>

投稿2023/03/29 15:21

pippi19

総合スコア679

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tonakai33

2023/03/30 03:18 編集

ありがとうございます。 教えて頂いた方法で画像をDLできるようにしてみます。
guest

0

canvasを描画結果を画像に変換したいのですが、 toDataURL()をどのように用いれば良いでしょうか?

以下の記事が参考になりませんか?

canvas の画像をアップロード (その 2)
http://surferonwww.info/BlogEngine/post/2022/11/20/upload-image-drawn-on-html5-canvas-2nd.aspx

クライアントの PC にある画像を取得して canvas に描画し、canvas の画像データを toDataURL() メソッド で Data url 形式として取得し、それを fetch API を用いて JSON 形式で送信するものです。

投稿2023/03/29 13:29

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tonakai33

2023/03/30 03:09

ありがとうございます。 参考にしてみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問