前提・実現したいこと
アップロードした画像をCanvasを用いて描画する際に、画像に含まれる回転情報を反映させて描画させたいのですが、うまく動作させることができません。
JavaScript-Load-Imageを用いて実現させたいと思いますが、わかる方がいらっしゃいましたら、ご教示お願い申し上げます。
該当のソースコード
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>title</title> </head> <body> <p><input type="file" id="file" accept='image/*' value="画像を選択"></p> <canvas id="mycanvas"></canvas> <script> (function () { var canvas = document.getElementById('mycanvas'); canvas.width = 600; canvas.height = 600; var ctx = canvas.getContext('2d'); var file = document.getElementById('file'); var uploadImgSrc; function loadLocalImage(e) { var fileData = e.target.files[0]; if(!fileData.type.match('image.*')) { alert('画像を選択してください'); return; } var reader = new FileReader(); reader.onload = function() { uploadImgSrc = reader.result; canvasDraw(); } reader.readAsDataURL(fileData); } file.addEventListener('change', loadLocalImage, false); function canvasDraw() { ctx.clearRect(0, 0, 600, 600); var bgImg = new Image(); bgImg.src = uploadImgSrc; bgImg.onload = function() { loadImage.parseMetaData(file, function (data) { if (data.exif) { options.orientation = data.exif.get('Orientation'); } }); ctx.drawImage(bgImg, 0, 0, 300, 400, ); } }; })(); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/2.18.0/load-image.all.min.js"></script> </body> </html>
参考URL
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/02/26 08:39
2018/02/26 08:45
2018/02/26 08:50