canvasタグにuploadした画像を取得する方法

canvasタグにuploadした画像を取得してbase64に変換したいのですが、canvasタグにuploadしていなくても画像として取得されてしまいます。

・canvasタグに画像がuploadされていない場合nullと表示
・canvasタグに画像がuploadされている場合取得

するためにはそしたらいいでしょうか？

試したコード

html
1<body>
2<div　align='left' class="lefts">
3     # canvasタグ
4     <canvas class="canvas" id="canvasL" width="350" height="350" style="border: 2px solid;"></canvas>
5     <a id="test1">
6       <font color="#FFFFFF"><label for="image"><b>左側を登録</b></label></font>
7     </a>
8　　　# uploadボタン
9     <input type="file" id="file1" accept="image/*" hidden>
10   </div>
11</body>

javascript
1("#predict-button").click(function(){
2  var Lcanvas = document.getElementById('canvasL');
3  if(Lcanvas === null)
4  {console.log('Limage is None');
5};
6  //base64に変換
7  L_image = Lcanvas.toDataURL('image/jpeg', 0.85);
8
9
10>>>
11//uploadされてなくても表示されてしまう
12"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD…KKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD//2Q=="}

参考サイト
・https://blog.ver001.com/canvas_save_file/

miyabi_pudding

2019/12/17 06:04

コンソールを表示して何かエラーが出ていませんか？予想だと、CORSエラーとか出てそう。

行動規範の内容に同意します

回答1件

ベストアンサー

CanvasRenderingContext2D を使って画像を drawImage() または fillText() など、テキスト描画系メソッドを使うことになりそうです。

canvasタグにuploadした画像を取得してbase64に変換したい

「アップロード済みの画像」であれば

javascript
1let ctx // {CanvasRenderingContext2D}
2let image = new Image()
3image.onload = () => {
4  // ctx.drawImage() で image を描画
5}
6image.onerror = () => {
7  // ctx.fillText() などで null を描画
8}
9image.src = "url"