###前提・実現したいこと
複数のcanvasにそれぞれ異なる画像を読み込ませて表示させたいと思っています。
例えば、
一つ目の<input id='fileSelectA' type='file' accept='image/*' />
から読み込んだ画像は"canvasA"に表示、
二つ目の<input id='fileSelectB' type='file' accept='image/*' />
から読み込んだ画像は"canvasB"に表示、
三つ目の…(以下略)
というように表示したいのですが、上手くできません。
全くの初心者で申し訳ありません。
よろしくお願いします。
###該当のソースコード
html
1 <input id='fileSelect' type='file' accept='image/*' /> 2 <input id='fileSelect2' type='file' accept='image/*' /> 3 <div style="position: relative;"> 4 <canvas id='canvasA' width='640' height='460' style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas> 5 </div> 6 <div style="position: relative;"> 7 <canvas id='canvasB' width='640' height='460' style="position: absolute; left: 0; top: 30; z-index: 1;"></canvas> 8 </div>
Javascript
1function loadImg(e){ 2 var file = e.target.files[0]; 3 var imgA = new FileReader(); 4 imgA.onload = function(e){ 5 var imgB = new Image(); 6 imgB.onload = function(){ 7 var ctx = document.getElementById('canvasA').getContext('2d'); 8 ctx.drawImage(imgB, 0, 0, 640, 480); 9 }; 10 imgB.src = e.target.result; 11 }; 12 imgA.readAsDataURL(file); 13} 14function loadImg(e){ 15 var file = e.target.files[0]; 16 var imgA = new FileReader(); 17 imgA.onload = function(e){ 18 var imgB = new Image(); 19 imgB.onload = function(){ 20 var ctx = document.getElementById('canvasB').getContext('2d'); 21 ctx.drawImage(imgB, 0, 0, 640, 480); 22 }; 23 imgB.src = e.target.result; 24 }; 25 imgA.readAsDataURL(file); 26} 27 28 29$(function(){ 30 document.getElementById('fileSelect').addEventListener('change', loadImg, false); 31 document.getElementById('fileSelect2').addEventListener('change', loadImg, false); 32});
回答1件
あなたの回答
tips
プレビュー