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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

canvasで2つのプレビューを作り、意図するプレビューを削除したい

redkick
redkick

総合スコア0

canvas

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1回答

0評価

0クリップ

13閲覧

投稿2019/04/20 04:05

1つのプレビューであれば問題なく消せるのですが
2つにした途端、1つ目の削除ボタンで2つ目のプレビューが消えてしまいます。
思い当たる箇所を変更してみても状態が変わらず、問題点の指摘をしていただけないでしょうか?
よろしくお願い致します。

html

<html lang="ja"> <head> <meta charset="utf-8"> <title>アップロードテスト</title> <style> .preview { max-width: 300px; max-height: 300px; width: 300px; height: 300px; border: 1px solid darkgray; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.js"></script> <script> ////////////////  棟画像1 $(function(){ $('#file1').change(function(e){ //ファイルオブジェクトを取得する var file = e.target.files[0]; var reader = new FileReader(); //画像でない場合は処理終了 if(file.type.indexOf("image") < 0){ alert("画像ファイルを指定してください。"); $("#file1").val(''); //選択したファイルをクリア return false; } $('#del1').show(); }); window.onload= function(){ //2Dコンテキストのオブジェクトを生成する cvs = document.getElementById('preview1'); ctx = cvs.getContext('2d'); } $('#del1').click(function() { ctx.clearRect(0, 0, 800, 800); }); }); //クリア ////////////////  棟画像2 $(function(){ $('#file2').change(function(e){ //ファイルオブジェクトを取得する var file = e.target.files[0]; var reader = new FileReader(); //画像でない場合は処理終了 if(file.type.indexOf("image") < 0){ alert("画像ファイルを指定してください。"); $("#file2").val(''); //選択したファイルをクリア return false; } $('#del2').show(); }); window.onload= function(){ //2Dコンテキストのオブジェクトを生成する cvs = document.getElementById('preview2'); ctx = cvs.getContext('2d'); } $('#del2').click(function() { ctx.clearRect(0, 0, 800, 800); }); }); //クリア </script> </head> <body> <canvas id="preview1" class="preview"></canvas> <canvas id="preview2" class="preview"></canvas> <br> <input type="file" accept="image/*" name="img1" id="file1"><input type="button" id="del1" value="クリア"> <input type="file" accept="image/*" name="img2" id="file2"><input type="button" id="del2" value="クリア"> <script> $(function(){ var canvas = document.getElementById( "preview1" ); var ctx = preview1.getContext('2d'); //ファイルを読み込んだら $('#file1').on('change', function(e){ var fileData = e.target.files[0]; var orientation; var reader = new FileReader(); var image = new Image(); EXIF.getData(fileData, function(){ orientation = fileData.exifdata.Orientation; }); reader.onload = function() { image.onload = function() { var fd = new FormData(); var image_aspect,canvas_width,canvas_height,draw_width,draw_height; //アスペクト取得 image_aspect = (orientation == 5 || orientation == 6 || orientation == 7 || orientation == 8) ? image.width / image.height : image.height / image.width; canvas_width = 300; canvas_height = Math.floor(300 * image_aspect); //canvasの縦横サイズを指定 canvas.width = canvas_width; canvas.height = canvas_height; $('#preview1').width(canvas_width); $('#preview1').height(canvas_height); //描画サイズを指定 draw_width = canvas_width; draw_height = canvas_height; switch(orientation){ case 2: ctx.transform(-1, 0, 0, 1, canvas_width, 0); break; case 3: ctx.transform(-1, 0, 0, -1, canvas_width, canvas_height); break; case 4: ctx.transform(1, 0, 0, -1, 0, canvas_height); break; case 5: ctx.transform(-1, 0, 0, 1, 0, 0); ctx.rotate((90 * Math.PI) / 180); draw_width = canvas_height; draw_height = canvas_width; break; case 6: ctx.transform(1, 0, 0, 1, canvas_width, 0); ctx.rotate((90 * Math.PI) / 180); draw_width = canvas_height; draw_height = canvas_width; break; case 7: ctx.transform(-1, 0, 0, 1, canvas_width, canvas_height); ctx.rotate((-90 * Math.PI) / 180); draw_width = canvas_height; draw_height = canvas_width; break; case 8: ctx.transform(1, 0, 0, 1, 0, canvas_height); ctx.rotate((-90 * Math.PI) / 180); draw_width = canvas_height; draw_height = canvas_width; break; default: break; } //canvasを表示 $('#preview1').show(); //canvasに画像を描画 ctx.drawImage(image, 0, 0, draw_width, draw_height); } image.src = reader.result; } reader.readAsDataURL(fileData); }); }); $(function(){ var canvas = document.getElementById( "preview2" ); var ctx = preview2.getContext('2d'); //ファイルを読み込んだら $('#file2').on('change', function(e){ var fileData = e.target.files[0]; var orientation; var reader = new FileReader(); var image = new Image(); EXIF.getData(fileData, function(){ orientation = fileData.exifdata.Orientation; }); reader.onload = function() { image.onload = function() { var fd = new FormData(); var image_aspect,canvas_width,canvas_height,draw_width,draw_height; //アスペクト取得 image_aspect = (orientation == 5 || orientation == 6 || orientation == 7 || orientation == 8) ? image.width / image.height : image.height / image.width; canvas_width = 300; canvas_height = Math.floor(300 * image_aspect); //canvasの縦横サイズを指定 canvas.width = canvas_width; canvas.height = canvas_height; $('#preview2').width(canvas_width); $('#preview2').height(canvas_height); //描画サイズを指定 draw_width = canvas_width; draw_height = canvas_height; switch(orientation){ case 2: ctx.transform(-1, 0, 0, 1, canvas_width, 0); break; case 3: ctx.transform(-1, 0, 0, -1, canvas_width, canvas_height); break; case 4: ctx.transform(1, 0, 0, -1, 0, canvas_height); break; case 5: ctx.transform(-1, 0, 0, 1, 0, 0); ctx.rotate((90 * Math.PI) / 180); draw_width = canvas_height; draw_height = canvas_width; break; case 6: ctx.transform(1, 0, 0, 1, canvas_width, 0); ctx.rotate((90 * Math.PI) / 180); draw_width = canvas_height; draw_height = canvas_width; break; case 7: ctx.transform(-1, 0, 0, 1, canvas_width, canvas_height); ctx.rotate((-90 * Math.PI) / 180); draw_width = canvas_height; draw_height = canvas_width; break; case 8: ctx.transform(1, 0, 0, 1, 0, canvas_height); ctx.rotate((-90 * Math.PI) / 180); draw_width = canvas_height; draw_height = canvas_width; break; default: break; } //canvasを表示 $('#preview2').show(); //canvasに画像を描画 ctx.drawImage(image, 0, 0, draw_width, draw_height); } image.src = reader.result; } reader.readAsDataURL(fileData); }); }); </script> </body> </html>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

canvas

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。