Forked from: kjunichi's ドロップされた画像をダウンロードするテスト diff(14) ドロップされた画像をtoDataURLする kjunichi Follow 2012-01-23 09:45:40 License: MIT License Fork0 Fav0 View163 image/jpegでとりだしてます。iPhoneのWebClipのアイコンにしたい為。 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 83 lines HTML 4 lines CSS 1 lines image/jpegでとりだしてます。iPhoneのWebClipのアイコンにしたい為。 ドロップされた画像をtoDataURLする // forked from kjunichi's "ドロップされた画像をダウンロードするテスト" http://jsdo.it/kjunichi/wVWg // forked from kjunichi's "ドロップされた画像を貼り付ける" http://jsdo.it/kjunichi/sls3 window.onload=function(){ var con = document.getElementById("con"); con.innerHTML=""; var image = new Image(); function myConv(data) { // var myArray = data.split(""); var counter = 0; var outStr = ""; for(var i = 1; i <= myArray.length; i++) { outStr = outStr + myArray[i-1]; if(i%76===0) { outStr = outStr + '\\' + "\n"; } } return outStr; } image.onload = function() { var canvas = document.getElementById("world"); var ctx = canvas.getContext("2d"); //canvasのリサイズ canvas.width=114; canvas.height=114; ctx.drawImage(image,0,0,114,114); //ダウンロードリンクの作成 var texta = document.getElementById("dataurl"); texta.value=canvas.toDataURL("image/jpeg"); }; //ドロップされるエリアの取得 var dropArea = document.getElementById('dropImg'); //dropArea.addEventListener('dragenter', function(e) { // e.stopPropagation(); //}, false); dropArea.addEventListener('dragover', function(e) { e.preventDefault(); }, false); dropArea.addEventListener('dragleave', function(e) { e.preventDefault(); }, false); dropArea.addEventListener('drop', function(e) { e.preventDefault(); con.innerText = "Drop start"; var file = e.dataTransfer.files[0]; if( !file.type.match(/image\/(jpeg|png|gif|svg)/)[1]) { // 指定したファイル以外の場合、処理を続行しない。 e.stopPropagation(); return false; } var reader = new FileReader(); reader.onload = function(e) { con.innerText = 'Reader onload start'; var fileContent = reader.result; image.src = fileContent; con.innerText = 'Reader onload end'; }; reader.readAsDataURL(file); e.stopPropagation(); con.innerText = "Drop end"; }, false); //document.body.addEventListener('dragover', function(e) { // e.preventDefault(); //}, false); // document.body.addEventListener('dragenter', function(e) { // e.stopPropagation(); //}, false); }; <div id="dropImg">ここに画像ファイルをドロップ</div> <canvas id="world"></canvas> <textarea id="dataurl" placeholder="ここに結果が表示されます。"></textarea> <div id="con"></div> ドロップされた画像をtoDataURLする body { background-color: #DDDDDD; font: 30px sans-serif; } image/jpegでとりだしてます。iPhoneのWebClipのアイコンにしたい為。 // forked from kjunichi's "ドロップされた画像をダウンロードするテスト" http://jsdo.it/kjunichi/wVWg // forked from kjunichi's "ドロップされた画像を貼り付ける" http://jsdo.it/kjunichi/sls3 window.onload=function(){ var con = document.getElementById("con"); con.innerHTML=""; var image = new Image(); function myConv(data) { // var myArray = data.split(""); var counter = 0; var outStr = ""; for(var i = 1; i <= myArray.length; i++) { outStr = outStr + myArray[i-1]; if(i%76===0) { outStr = outStr + '\\' + "\n"; } } return outStr; } image.onload = function() { var canvas = document.getElementById("world"); var ctx = canvas.getContext("2d"); //canvasのリサイズ canvas.width=114; canvas.height=114; ctx.drawImage(image,0,0,114,114); //ダウンロードリンクの作成 var texta = document.getElementById("dataurl"); texta.value=canvas.toDataURL("image/jpeg"); }; //ドロップされるエリアの取得 var dropArea = document.getElementById('dropImg'); //dropArea.addEventListener('dragenter', function(e) { // e.stopPropagation(); //}, false); dropArea.addEventListener('dragover', function(e) { e.preventDefault(); }, false); dropArea.addEventListener('dragleave', function(e) { e.preventDefault(); }, false); dropArea.addEventListener('drop', function(e) { e.preventDefault(); con.innerText = "Drop start"; var file = e.dataTransfer.files[0]; if( !file.type.match(/image\/(jpeg|png|gif|svg)/)[1]) { // 指定したファイル以外の場合、処理を続行しない。 e.stopPropagation(); return false; } var reader = new FileReader(); reader.onload = function(e) { con.innerText = 'Reader onload start'; var fileContent = reader.result; image.src = fileContent; con.innerText = 'Reader onload end'; }; reader.readAsDataURL(file); e.stopPropagation(); con.innerText = "Drop end"; }, false); //document.body.addEventListener('dragover', function(e) { // e.preventDefault(); //}, false); // document.body.addEventListener('dragenter', function(e) { // e.stopPropagation(); //}, false); }; <div id="dropImg">ここに画像ファイルをドロップ</div> <canvas id="world"></canvas> <textarea id="dataurl" placeholder="ここに結果が表示されます。"></textarea> <div id="con"></div> body { background-color: #DDDDDD; font: 30px sans-serif; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか？ image/jpegでとりだしてます。iPhoneのWebClipのアイコンにしたい為。 Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit http://jsdo.it/kjunichi/8y9h ドロップされた画像をtoDataURLする Tweet style Design view Code view code <script type="text/javascript" src="http://jsdo.it/blogparts/8y9h/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/kjunichi/8y9h" title="ドロップされた画像をtoDataURLする">ドロップされた画像をtoDataURLする - jsdo.it - share JavaScript, HTML5 and CSS</a></p> Tweet twitter Forked sort new page view favorite forked ドロップされた画像をtoDataURLしてEvernoteへ.. kjunichi 00 463views 4/76/8
