目次
{ "name": "簡易リサイズしてやんよ!!!", "version": "0.1.0", "manifest_version": 2, "description": "指定サイズにリサイズして画像を再生成します", "icons": { "32": "icon_32.png", "48": "icon_48.png", "128": "icon_128.png" }, "browser_action": { "default_popup": "popup.html" }, "background": { "css": ["style.css"], "scripts": [ "jquery-1.8.2.min.js", "background.js" ] } }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css" type="text/css"> <script src='jquery-1.8.2.min.js'></script> <script src='background.js'></script> </head> <body id="chromeApp" style="min-width:200px"> <div id="imageSlice"> <div id="imageSheetBox"> <p>横幅:<input id="sliceSize" min="1" max="9999" value="500" step="1" type="number">px<br>(1px~9999pxの範囲で設定)</p> <div id="resizeZone">リサイズしたい画像を<br>ドロップしてください<br></div> <div id="resizeSliceBox"></div> </div> </div> </body> </html>
@charset "utf-8"; /* ========================================================= リセット ========================================================= */ * { margin: 0; padding: 0; } /* ========================================================= clearfix ========================================================= */ #chromeApp .clearfix:after { content: ""; clear: both; display: block; } #chromeApp { font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', sans-serif; overflow: scroll; } #chromeApp a:hover { text-decoration: none; opacity: 0.8; } /* ========================================================= 詳細な装飾 ========================================================= */ /* 簡易スライス */ #chromeApp #imageSlice h1 { font-size: 130%; margin: 10px auto; width: 96%; } #chromeApp #imageSheetBox { display: block; } #chromeApp #imageSlice #resizeZone { display: block; border: 2px dashed #bbb; border-radius: 5px; color: #bbb; padding: 25px; text-align: center; margin: 10px auto 5px; font-size: 12px; -khtml-user-drag: element; } #chromeApp #imageSlice #slice { width: 100%; height: 30px; line-height: 20px; text-align: center; margin: 10px auto; display: block; cursor: pointer; background: #CCC; border-radius: 5px; font-weight: bold; font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', sans-serif; } #chromeApp #imageSlice #resizeSliceBox img{ width: 100%; display: block; }
(function() { $(function(){ /************************************************************************** 簡易リサイズ機能 **************************************************************************/ //ローカル画像ファイルをブラウザに投影 function handleFileSlice(evt) { $('#resizeSliceBox img').remove(); evt.stopPropagation(); evt.preventDefault(); var files = evt.dataTransfer.files; var output = []; for (var i = 0, f; f = files[i]; i++) { console.log(files[i]); //ファイルの形式を確認 if (!f.type.match('image.*')) { alert("このファイルは画像ファイルではありません"); continue; } var file = f; var canvas = document.createElement("canvas"), ctx = canvas.getContext('2d'), image = new Image(); canvas.width = canvas.height = 0; image.src = URL.createObjectURL(file); image.onload = function() { var sliceSize = $('#sliceSize').val(); if(sliceSize == 0){ //元サイズのまま var w = image.naturalWidth; var h = image.height * (image.naturalWidth/image.width); }else{ //横幅に合わせてリサイズ var w = sliceSize; var h = Math.round(sliceSize / image.naturalWidth * image.naturalHeight); } console.log(w + "+" + h); canvas.width = w; canvas.height = h; ctx.drawImage(image, 0, 0, w, h); var img = document.createElement('img'); img.src = canvas.toDataURL(file.type); var head = 'data:' + file.type + ';base64,'; var imgFileSize = Math.round((img.src.length - head.length)*3/4); var fileSlice = image.naturalWidth + "px ⇒ " + sliceSize + "px"; $("#resizeSliceBox").append(img); $('#resizeZone').html('<span style="color:blue">リサイズ処理しました(' + fileSlice + ')<br>デスクトップにコピーしてください</span>'); } }; }; //画像ファイルのドラッグ&ドロップ設定 function handleDragOver(evt) { evt.stopPropagation(); evt.preventDefault(); evt.dataTransfer.dropEffect = 'copy'; }; var resizeZone = document.getElementById('resizeZone'); resizeZone.addEventListener('dragover', handleDragOver, false); resizeZone.addEventListener('drop', handleFileSlice, false); resizeZone.addEventListener('dragenter', handleDragOver, false); /**********************************************************************/ }); }) ();