Q&A
１つのプレビューであれば問題なく消せるのですが
２つにした途端、１つ目の削除ボタンで２つ目のプレビューが消えてしまいます。
思い当たる箇所を変更してみても状態が変わらず、問題点の指摘をしていただけないでしょうか？
よろしくお願い致します。
html
1<html lang="ja"> 2<head> 3<meta charset="utf-8"> 4<title>アップロードテスト</title> 5<style> 6.preview { 7 max-width: 300px; 8 max-height: 300px; 9 width: 300px; 10 height: 300px; 11 border: 1px solid darkgray; 12} 13</style> 14 15<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 16<script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.js"></script> 17<script> 18//////////////// 棟画像1 19$(function(){ 20 $('#file1').change(function(e){ 21 //ファイルオブジェクトを取得する 22 var file = e.target.files[0]; 23 var reader = new FileReader(); 24 25 //画像でない場合は処理終了 26 if(file.type.indexOf("image") < 0){ 27 alert("画像ファイルを指定してください。"); 28 $("#file1").val(''); //選択したファイルをクリア 29 return false; 30 } 31 $('#del1').show(); 32 }); 33 34 window.onload= function(){ 35 //2Dコンテキストのオブジェクトを生成する 36 cvs = document.getElementById('preview1'); 37 ctx = cvs.getContext('2d'); 38 } 39 $('#del1').click(function() { 40 ctx.clearRect(0, 0, 800, 800); 41 }); 42}); 43//クリア 44 45 46//////////////// 棟画像2 47$(function(){ 48 $('#file2').change(function(e){ 49 //ファイルオブジェクトを取得する 50 var file = e.target.files[0]; 51 var reader = new FileReader(); 52 53 //画像でない場合は処理終了 54 if(file.type.indexOf("image") < 0){ 55 alert("画像ファイルを指定してください。"); 56 $("#file2").val(''); //選択したファイルをクリア 57 return false; 58 } 59 $('#del2').show(); 60 }); 61 62 window.onload= function(){ 63 //2Dコンテキストのオブジェクトを生成する 64 cvs = document.getElementById('preview2'); 65 ctx = cvs.getContext('2d'); 66 } 67 $('#del2').click(function() { 68 ctx.clearRect(0, 0, 800, 800); 69 }); 70}); 71//クリア 72 73</script> 74</head> 75<body> 76 <canvas id="preview1" class="preview"></canvas> 77 <canvas id="preview2" class="preview"></canvas> 78<br> 79 <input type="file" accept="image/*" name="img1" id="file1"><input type="button" id="del1" value="クリア"> 80 <input type="file" accept="image/*" name="img2" id="file2"><input type="button" id="del2" value="クリア"> 81 82<script> 83$(function(){ 84 85 var canvas = document.getElementById( "preview1" ); 86 var ctx = preview1.getContext('2d'); 87 88 //ファイルを読み込んだら 89 $('#file1').on('change', function(e){ 90 91 var fileData = e.target.files[0]; 92 var orientation; 93 94 var reader = new FileReader(); 95 96 var image = new Image(); 97 98 EXIF.getData(fileData, function(){ 99 orientation = fileData.exifdata.Orientation; 100 }); 101 102 reader.onload = function() { 103 104 image.onload = function() { 105 106 var fd = new FormData(); 107 var image_aspect,canvas_width,canvas_height,draw_width,draw_height; 108 //アスペクト取得 109 image_aspect = (orientation == 5 || orientation == 6 || orientation == 7 || orientation == 8) ? image.width / image.height : image.height / image.width; 110 111 canvas_width = 300; 112 canvas_height = Math.floor(300 * image_aspect); 113 114 //canvasの縦横サイズを指定 115 canvas.width = canvas_width; 116 canvas.height = canvas_height; 117 $('#preview1').width(canvas_width); 118 $('#preview1').height(canvas_height); 119 120 //描画サイズを指定 121 draw_width = canvas_width; 122 draw_height = canvas_height; 123 124 switch(orientation){ 125 126 case 2: 127 ctx.transform(-1, 0, 0, 1, canvas_width, 0); 128 break; 129 130 case 3: 131 ctx.transform(-1, 0, 0, -1, canvas_width, canvas_height); 132 break; 133 134 case 4: 135 ctx.transform(1, 0, 0, -1, 0, canvas_height); 136 break; 137 138 case 5: 139 ctx.transform(-1, 0, 0, 1, 0, 0); 140 ctx.rotate((90 * Math.PI) / 180); 141 draw_width = canvas_height; 142 draw_height = canvas_width; 143 break; 144 145 case 6: 146 ctx.transform(1, 0, 0, 1, canvas_width, 0); 147 ctx.rotate((90 * Math.PI) / 180); 148 draw_width = canvas_height; 149 draw_height = canvas_width; 150 break; 151 152 case 7: 153 ctx.transform(-1, 0, 0, 1, canvas_width, canvas_height); 154 ctx.rotate((-90 * Math.PI) / 180); 155 draw_width = canvas_height; 156 draw_height = canvas_width; 157 break; 158 159 case 8: 160 ctx.transform(1, 0, 0, 1, 0, canvas_height); 161 ctx.rotate((-90 * Math.PI) / 180); 162 draw_width = canvas_height; 163 draw_height = canvas_width; 164 break; 165 166 default: 167 break; 168 } 169 170 //canvasを表示 171 $('#preview1').show(); 172 173 //canvasに画像を描画 174 ctx.drawImage(image, 0, 0, draw_width, draw_height); 175 } 176 image.src = reader.result; 177 } 178 reader.readAsDataURL(fileData); 179 }); 180}); 181 182$(function(){ 183 184 var canvas = document.getElementById( "preview2" ); 185 var ctx = preview2.getContext('2d'); 186 187 //ファイルを読み込んだら 188 $('#file2').on('change', function(e){ 189 190 var fileData = e.target.files[0]; 191 var orientation; 192 193 var reader = new FileReader(); 194 195 var image = new Image(); 196 197 EXIF.getData(fileData, function(){ 198 orientation = fileData.exifdata.Orientation; 199 }); 200 201 reader.onload = function() { 202 203 image.onload = function() { 204 205 var fd = new FormData(); 206 var image_aspect,canvas_width,canvas_height,draw_width,draw_height; 207 //アスペクト取得 208 image_aspect = (orientation == 5 || orientation == 6 || orientation == 7 || orientation == 8) ? image.width / image.height : image.height / image.width; 209 210 canvas_width = 300; 211 canvas_height = Math.floor(300 * image_aspect); 212 213 //canvasの縦横サイズを指定 214 canvas.width = canvas_width; 215 canvas.height = canvas_height; 216 $('#preview2').width(canvas_width); 217 $('#preview2').height(canvas_height); 218 219 //描画サイズを指定 220 draw_width = canvas_width; 221 draw_height = canvas_height; 222 223 switch(orientation){ 224 225 case 2: 226 ctx.transform(-1, 0, 0, 1, canvas_width, 0); 227 break; 228 229 case 3: 230 ctx.transform(-1, 0, 0, -1, canvas_width, canvas_height); 231 break; 232 233 case 4: 234 ctx.transform(1, 0, 0, -1, 0, canvas_height); 235 break; 236 237 case 5: 238 ctx.transform(-1, 0, 0, 1, 0, 0); 239 ctx.rotate((90 * Math.PI) / 180); 240 draw_width = canvas_height; 241 draw_height = canvas_width; 242 break; 243 244 case 6: 245 ctx.transform(1, 0, 0, 1, canvas_width, 0); 246 ctx.rotate((90 * Math.PI) / 180); 247 draw_width = canvas_height; 248 draw_height = canvas_width; 249 break; 250 251 case 7: 252 ctx.transform(-1, 0, 0, 1, canvas_width, canvas_height); 253 ctx.rotate((-90 * Math.PI) / 180); 254 draw_width = canvas_height; 255 draw_height = canvas_width; 256 break; 257 258 case 8: 259 ctx.transform(1, 0, 0, 1, 0, canvas_height); 260 ctx.rotate((-90 * Math.PI) / 180); 261 draw_width = canvas_height; 262 draw_height = canvas_width; 263 break; 264 265 default: 266 break; 267 } 268 269 //canvasを表示 270 $('#preview2').show(); 271 272 //canvasに画像を描画 273 ctx.drawImage(image, 0, 0, draw_width, draw_height); 274 } 275 image.src = reader.result; 276 } 277 reader.readAsDataURL(fileData); 278 }); 279}); 280</script> 281</body> 282</html> 283
回答1件
0
ベストアンサー
window.onloadに関数を代入するという書式は変数の代入と考えるとわかりやすいと思います。
JavaScript
1let a=0; 2a=2; 3a=4;
上記コードのaの値は4となりますが、これと同じ要領です。
JavaScript
1function a(){ 2 ... 3} 4function b(){ 5 ... 6} 7window.onload=a; 8window.onload=b;
上記コードの場合、windowがロードされたときには関数bが実行されてしまいます。
つまり、質問者様のコードの場合、一番最後にwindow.onloadに代入された関数が実行されることになります。
増やす場合は以下のように書きます。
JavaScript
1window.addEventListener("load",function(){ 2 ... 3});
投稿2019/04/20 04:38
編集2019/04/20 04:43
総合スコア35
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/20 06:09