写真を美人化するブックマークレット

ウェブ

お手軽な美人フィルタ

私の勤める会社で今度ちょっとした発表をするのですが、久々にHTMLを題材にすることにしました。

昔から美人フィルタとかそういったものがありましたが、これをサーバや専用ソフトなしでHTML5のcanvasとJavaScriptを使って実現しようという話。さらにカンタンに誰でも使えるようにブックマークレットにしてしまいます。お手軽ですね！

不細工化
オリジナル画像
美人化

Loading...

画像はモデルピースさんで配布されているフリー素材です。藤浦真菜さんという方の写真をトリミング、サイズ縮小させていただいています。

そして本題のブックマークレット

ブックマークレットは以下の通りです。なお、FirefoxとChromeとSafari(全てWindowsで最新版)では動くのを確認しました。AndroidでもOK(マウスでなぞるのはできませんが。)。

javascript:(function(){var%20FACTOR=0.8;function%20filter(org_img){var%20canvas=document.createElement('canvas');var%20context=canvas.getContext('2d');var%20_canvasW=org_img.naturalWidth;var%20_canvasH=org_img.naturalHeight;canvas.width=_canvasW;canvas.height=_canvasH;var%20imgObj=new%20Image(_canvasW,_canvasH);imgObj.src=org_img.src;context.drawImage(imgObj,0,0);var%20newImage=new%20Array(_canvasW*_canvasH*3);for(var%20y=0;y%20<%20_canvasH-1;y++){for(var%20x=0;x%20<%20_canvasW-1;x++){var%20pixelData1=getPixel(canvas,x,y,_canvasW,_canvasH);var%20pixelData2=getPixel(canvas,x+1,y,_canvasW,_canvasH);var%20pixelData3=getPixel(canvas,x,y+1,_canvasW,_canvasH);%20R=Math.abs(pixelData1.R%20-%20pixelData2.R)%20+%20Math.abs(pixelData1.R%20-%20pixelData3.R);var%20G=Math.abs(pixelData1.G%20-%20pixelData2.G)%20+%20Math.abs(pixelData1.G%20-%20pixelData3.G);var%20B=Math.abs(pixelData1.B%20-%20pixelData2.B)%20+%20Math.abs(pixelData1.B%20-%20pixelData3.B);setPixel(canvas,x,y,pixelData1.R-FACTOR*R,pixelData1.G-FACTOR*G,pixelData1.B-FACTOR*B,255,_canvasW,_canvasH);}}if(org_img.parentNode){org_img.parentNode.replaceChild(canvas,org_img);}else{org_img.appendChild(canvas);alert('not_replace');}}function%20getPixel(srcCanvas,x,y,canvasW,canvasH){var%20imagePixelData=srcCanvas.getContext('2d').getImageData(x,y,1,1).data;var%20R=imagePixelData[0];var%20G=imagePixelData[1];var%20B=imagePixelData[2];return%20{R:R,G:G,B:B};}function%20setPixel(srcCanvas,x,y,R,G,B,A,canvasW,canvasH){var%20context=srcCanvas.getContext('2d');var%20pixelImage=context.createImageData(1,1);pixelImage.data[0]=R;pixelImage.data[1]=G;pixelImage.data[2]=B;pixelImage.data[3]=A;context.putImageData(pixelImage,x,y);}var%20imgs=document.getElementsByTagName('img');for(var%20i%20in%20imgs){if(imgs[i].src==null){continue;}imgs[i].addEventListener('mouseover',function(ev){filter(ev.target)},false);}})();

長いですね。読む気にならないので解説もなしにしましょう。

使い方

使い方は、外部サイト http://atzy.info/bookmarklet.htmlにも書いておきましたが、簡単です。

ブックマークレットを保存したら、変換したい画像のあるページに行ってブックマークレットを選択します。
そして「えい！」と声をかけながら魔法をかける要領で画像をなぞります*1。そして数秒(画像サイズやPCのパワーによります)待ちますと画像が美人化します。

ただ、たとえばはてなのように、画像とページが同じドメインにない場合にはこの魔法がうまくかかりません。大人の言葉でいうとセキュリティに引っかかってしまいます。
しかし、その場合は、画像を右クリックで選択して、画像のみを表示したうえでブックマークレットを実行すればよいのです。

その他

  • 変換後画像は保存も可能
  • 画像が小さすぎると、けばけばしくなります
  • 画像が大きすぎると、あまり変わり映えしません
  • さて、こんなのが発表内容でいいのだろうか？

*1:ほんとはマウスなしで自動でやってもいいんですが、このマウスの「えい！」が少し気持ちいいのです。