Forked from: kjunichi's ドロップされた画像をtoDataURLしてEvernoteへ diff(139) PCで作ったアイコンをiPhoneのホーム画面に kjunichi Follow 2012-01-26 07:29:27 License: MIT License Fork0 Fav0 View289 Evernoteのアカウントが必要です。 PCでこちらからiPhoneのホーム画面に表示したいアイコンをドロップしてEvernoteのClipボタンが表示されるので、これをクリックして、ノートを作成してiPhoneで作成したノートを開いて、リンクをクリックして、safariで開いて下さい。 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 70 lines HTML 8 lines CSS 8 lines Evernoteのアカウントが必要です。 PCでこちらからiPhoneのホーム画面に表示したいアイコンをドロップしてEvernoteのClipボタンが表示されるので、これをクリックして、ノートを作成してiPhoneで作成したノートを開いて、リンクをクリックして、safariで開いて下さい。 PCで作ったアイコンをiPhoneのホーム画面に window.onload=function() { document.getElementById('EN').style.display = "none"; 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("content"); texta.innerHTML="<a href=\"http://jsrun.it/kjunichi/yw1b?t="+(new Date()).getTime()+"#"+canvas.toDataURL("image/jpeg") + "\">ここをクリックして下さい。</a>" //+ "<img src=\""+canvas.toDataURL("image/jpeg")+ "\">"; canvas.style.display = "none"; texta.style.display = "none"; document.title="iPhoneでノートを開いて下さい"; document.getElementById('EN').style.display = "block"; }; //ドロップされるエリアの取得 var dropArea = document.getElementById('dropImg'); dropArea.addEventListener('dragover', function(e) { e.preventDefault(); }, false); dropArea.addEventListener('dragleave', function(e) { e.preventDefault(); }, false); dropArea.addEventListener('drop', function(e) { e.preventDefault(); 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) { var fileContent = reader.result; image.src = fileContent; }; reader.readAsDataURL(file); e.stopPropagation(); }, false); }; <div id="dropImg" class="block">ここに画像ファイルをドロップ</div> <canvas id="world"></canvas> <div id="content"></div> <div id="EN"> <script type="text/javascript" src="http://static.evernote.com/noteit.js"></script> <a href="#" onclick="Evernote.doClip({contentId:'content',providerName:'iPhoneでノートを開いてください。'}); return false;"><img src="http://static.evernote.com/article-clipper-vert.png" alt="Clip to Evernote" /></a> </div> PCで作ったアイコンをiPhoneのホーム画面に body { background-color: #DDDDDD; font: 30px sans-serif; } .block{ margin:5px; border:2px dotted #6ebef2; background-color:#ecf5fa; padding:15px 15px 15px 15px; text-align:left; } Evernoteのアカウントが必要です。 PCでこちらからiPhoneのホーム画面に表示したいアイコンをドロップしてEvernoteのClipボタンが表示されるので、これをクリックして、ノートを作成してiPhoneで作成したノートを開いて、リンクをクリックして、safariで開いて下さい。 window.onload=function() { document.getElementById('EN').style.display = "none"; 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("content"); texta.innerHTML="<a href=\"http://jsrun.it/kjunichi/yw1b?t="+(new Date()).getTime()+"#"+canvas.toDataURL("image/jpeg") + "\">ここをクリックして下さい。</a>" //+ "<img src=\""+canvas.toDataURL("image/jpeg")+ "\">"; canvas.style.display = "none"; texta.style.display = "none"; document.title="iPhoneでノートを開いて下さい"; document.getElementById('EN').style.display = "block"; }; //ドロップされるエリアの取得 var dropArea = document.getElementById('dropImg'); dropArea.addEventListener('dragover', function(e) { e.preventDefault(); }, false); dropArea.addEventListener('dragleave', function(e) { e.preventDefault(); }, false); dropArea.addEventListener('drop', function(e) { e.preventDefault(); 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) { var fileContent = reader.result; image.src = fileContent; }; reader.readAsDataURL(file); e.stopPropagation(); }, false); }; <div id="dropImg" class="block">ここに画像ファイルをドロップ</div> <canvas id="world"></canvas> <div id="content"></div> <div id="EN"> <script type="text/javascript" src="http://static.evernote.com/noteit.js"></script> <a href="#" onclick="Evernote.doClip({contentId:'content',providerName:'iPhoneでノートを開いてください。'}); return false;"><img src="http://static.evernote.com/article-clipper-vert.png" alt="Clip to Evernote" /></a> </div> body { background-color: #DDDDDD; font: 30px sans-serif; } .block{ margin:5px; border:2px dotted #6ebef2; background-color:#ecf5fa; padding:15px 15px 15px 15px; text-align:left; } use an iframe compat browser, deer Tweet QR code Embed Design view Code view <script type="text/javascript" src="http://jsdo.it/blogparts/3p3B/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/kjunichi/3p3B" title="PCで作ったアイコンをiPhoneのホーム画面に">PCで作ったアイコンをiPhoneのホーム画面に - jsdo.it - share JavaScript, HTML5 and CSS</a></p> zip tags Tweet twitter
