Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【ツール】アイキャッチ画像切り出しツール

 どうも!LSSです!!

 

昨日の記事で最後に書いていた、 

画像ファイルを選択 画面にそれを表示しながら、拡大縮小・回転・切り抜きなどの処理を行う 加工処理を終えたものをダウンロード保存 なんて事ができれば、たまに「448x252ピクセルにした画像をサムネイルとして使用」する手間がだいぶ省けそう!

【HTML】またもinputタグ。今度はtype="file"を試してみます! - Little Strange Software

ですが、なんか出来たようです^^

 

 

アイキャッチ画像切り出しツール

 

横位置

縦位置

拡大率

縦横比

 

 

使い方

まず、「ファイルを選択」で元となる画像ファイルを選択します。

 

四角い枠内に、選択した画像ファイルが表示されるので、「横位置」「縦位置」「拡大率」「縦横比」のスライダーを調整します。

 

調整ができたら「画像ファイルを保存」ボタンを押すと、現在日付時刻をファイル名としたpngファイルがダウンロードできます。
※なお、四角の枠線は画像には含まれません。

 

あとはそのpngファイルに別途文字入れ加工などを加えてアイキャッチ画像として使えます!

 

 

参考までに このツールのコードを晒しておきます

<p><input id="fl" type="file" /></p>
<p>[]<canvas id="cv0" style="border: 1px solid black;" width="448" height="252"> </canvas>[]</p>
<div id="gamen"> </div>
<p>横位置<input id="rngsx" style="width: 100%;" max="1000" min="-1000" type="range" value="0" /></p>
<p>縦位置<input id="rngsy" style="width: 100%;" max="1000" min="-1000" type="range" value="0" /></p>
<p>拡大率<input id="rngsw" style="width: 100%;" max="300" min="0" type="range" value="100" /></p>
<p>縦横比<input id="rngsh" style="width: 100%;" max="300" min="0" type="range" value="100" /></p>
<p><input id="sbtn" type="button" value="画像ファイルを保存" /></p>
<script>// <![CDATA[
ctx=cv0.getContext("2d");
cvimg=new Image();
fl.addEventListener('change',gw,false);
rngsx.addEventListener('input',gw,false);
rngsy.addEventListener('input',gw,false);
rngsw.addEventListener('input',gw,false);
rngsh.addEventListener('input',gw,false);
sbtn.addEventListener('click',cvsave,false);
cvimg.addEventListener('load',imgld,false);
gw();
function gw(e){
txt='name : '+fl.files[0].name+' ';
txt+='size : '+fl.files[0].size+' bytes ';
txt+='MIME : '+fl.files[0].type+'<br/>';
txt+='横位置 : '+rngsx.value+' ';
txt+='縦位置 : '+rngsy.value+' ';
txt+='拡大率 : '+rngsw.value/100+' ';
txt+='縦横比 : '+rngsh.value/100+'<br/>';
gamen.innerHTML=txt;
cvimg.src = URL.createObjectURL(fl.files[0]);
}
function imgld(ev){
ctx.clearRect(0, 0, ctx.canvas.clientWidth, ctx.canvas.clientHeight);
ctx.drawImage(cvimg,-rngsx.value,-rngsy.value,448/rngsw.value*100,252/rngsw.value*100/rngsh.value*100,0,0,448,252);
}
function cvsave(e){
clkd=document.createElement("a");
clkd.href=cv0.toDataURL("image/png");
clkd.download = ('0000'+(new Date()).getFullYear()).slice(-4)+('00'+(new Date()).getMonth()+1).slice(-2)+('00'+(new Date()).getDate()).slice(-2)+'_'+('00'+(new Date()).getHours()).slice(-2)+('00'+(new Date()).getMinutes()).slice(-2)+('00'+(new Date()).getSeconds()).slice(-2)+'.png';
clkd.click();
}
// ]]></script>

 

 

あとがき

ファイルを選択したり、ダウンロードしたりしていますが、そのファイルのデータ自体はサーバとの送受信を一切行っておりませんので、その点はご安心ください^^

 

このツールは、画像の切り出しのみに特化していますが、フィルターをかけたり文字を入れたり飾り枠をつけたり…とワンストップで完了するものになったらいいな、という気もしつつ…
「そうなったらどこまでやるの!?」
とキリがなくなりそうなので、この時点で公開しちゃいますw

  

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^