主にプログラミングに関して。Python, .NET Framework(C#), JavaScript, その他いくらか。
記事にあるサンプルやコードは要検証。使用に際しては責任を負いかねます

スポンサーサイト

                
tags:
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JavaScript: Exifを保ったまま画像を縮小 Resize a Jpeg Image by JS Keeping EXIF: part 3

                
tags: JavaScript
前回: JavaScript: Resize JPEG images without losing Exif part2


JavaScriptでJPEG縮小をおこなうスクリプトが、ようやく完成に持ちこめた。
特徴は……インストールなしに、クライアントサイドで画像を縮小できる。縮小してもExifデータが失われない。縮小は同期処理なのでスクリプティングが楽。バイリニアで縮小をかけるので、画質の劣化を抑えることができる。
Demo
最近のスマフォは高画素化が進んで画像データの肥大化が進み、サーバへアップロードすると転送速度のおそさと相まってサーバの一つのプロセスを浪費しかねない。回線が潤沢に利用できないモバイル端末では、通信キャリアが画像などを圧縮してクライアントへ送ることがあるぐらいなので、逆にクライアントからサーバへ送るときも画像を小さくしてしまおうということでMinifyJpegが利用できる。

https://github.com/hMatoba/JavaScript-MinifyJpeg
depend on: jpg.js (https://github.com/notmasteryet/jpgjs)

* Minify JPEG images without losing Exif
---- Generally, resized image is generated from plane canvas, and therefore the image loses Exif.
画像縮小をExifデータを保持したまま行える




* With FileReader, simple to use
---- Many resize scripts do resize in onload event of Image() to get actual image size. My script gets actual image size from binary data.
縮小は一行書くだけ。同期処理で簡単に縮小できる
var reader = new FileReader();
reader.onloadend = (function(theFile)
{
return function(e)
{
var minified = MinifyJpeg.minify(e.target.result, 1280);

// post
var xhr = new XMLHttpRequest();
xhr.open('POST', "/upload");
xhr.setRequestHeader('Content-Type', 'image\/jpeg');
xhr.send(minified.buffer);

// add image to body
var enc = "data:image/jpeg;base64," + MinifyJpeg.encode64(minified);
$('body').append('<img src="' + enc + '" alt="">');
}
})(f);
reader.readAsDataURL(f);



* Good quality resizing
---- Bilinear resampling keeps image quality.
フィルタ処理で画質劣化を抑えられる
130201_0.png


* Not lightweight process
---- Manipulating values pixel by pixel. It takes a few seconds...


FileReader()に関して参考: http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files


以前書いた、Exifを保ったままJPEGを縮小するスクリプトの縮小アルゴリズムをバイリニアにした。縮小アルゴリズムの部分は以下で見つけたものをコピペ、アンドアダプト。スクリプトを公開してくれていることはなんともありがたいもんだと思う。
http://www.strauss-acoustics.ch/js-bilinear-interpolation.html

JPEGデコーダは以下のものを使っている。やはりありがたい。
https://github.com/notmasteryet/jpgjs

これでJavaScriptでのJPEG縮小は一段落。
            

コメントの投稿

非公開コメント

プロフィール

Matoba

Author:Matoba

最新記事
リンク
作ったものなど
月別アーカイブ
カテゴリ
タグリスト

検索フォーム
Amazon
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。