Forked from: kjunichi's ドロップされた画像をtoDataURLする diff(164)

ドロップされた画像をtoDataURLしてEvernoteへ

kjunichi

2012-01-25 15:48:54

License: MIT License

Fork: 0

Fav: 0

View: 251

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 4 lines
HTML 76 lines
CSS 8 lines

PCでiPhoneのホーム画面に置きたいアイコンをドロップして
Evernoteへ保存して、iPhoneで保存したノートの中のリンクを
クリックしてそれをsafariで開いてホーム画面に登録して完了！

ドロップされた画像をtoDataURLしてEvernoteへ

<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>
    <script type="text/javascript">
    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#"+canvas.toDataURL("image/jpeg")
	+ "\">Click</a>";
  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);
    };

</script>

ドロップされた画像をtoDataURLしてEvernoteへ

PCでiPhoneのホーム画面に置きたいアイコンをドロップして Evernoteへ保存して、iPhoneで保存したノートの中のリンクをクリックしてそれをsafariで開いてホーム画面に登録して完了！// forked from kjunichi's "ドロップされた画像をtoDataURLする" http://jsdo.it/kjunichi/8y9h // forked from kjunichi's "ドロップされた画像をダウンロードするテスト" http://jsdo.it/kjunichi/wVWg // forked from kjunichi's "ドロップされた画像を貼り付ける" http://jsdo.it/kjunichi/sls3 <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> <script type="text/javascript"> 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#"+canvas.toDataURL("image/jpeg") + "\">Click</a>"; 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); }; </script>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; }

Tweet
QR code
Embed

Design view
Code view
<script type="text/javascript" src="http://jsdo.it/blogparts/oDxY/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/kjunichi/oDxY" title="ドロップされた画像をtoDataURLしてEvernoteへ">ドロップされた画像をtoDataURLしてEvernoteへ - jsdo.it - share JavaScript, HTML5 and CSS</a></p>
zip

Forked

sort

PCで作ったアイコンをiPhoneのホーム画面に

kjunichi

0
0
288views

70/8/8

ドロップされた画像をtoDataURLしてEvernoteへ

tags

Tweet

twitter

Forked