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

スポンサーサイト

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

HTML5とJavaScriptを使って画像(JPEGやPNG)をリサイズ[後日記事あり]

                
tags:
Exifを保ったままJPEG画像を縮小
※上記のリンクはこの記事の内容を継承したアップデート記事


Resize a image with HTML5 and JavaScript

Javascriptでローカルファイルを読み込んで表示

ローカルのファイルをブラウザに読み込めることを知った。最近のカメラで撮った画像はやたら画素数が高い。その縮小処理をサーバ側でなく、クライアントでやっておいてくれると助かる。そこで、ローカルで画像の縮小処理をする方法を考えた。

・HTML5でcanvasが加わった。使えそうな気がするので試してみる。

調べてみたところ以下の手順でできそうだった(ちょっと端折った書き方をするけど)。
FileReader.readAsDataURL()で読み込む→
読み込んだデータをImage().srcに入れる(imgとする)→
任意のwidth,heightのcanvasを用意→
imgをcanvasに背景として入れる(ここで任意の倍率にサイズ変換できる)→
toDataURL()でcanvasを、ブラウザでJPEGとして使えるかたちにエンコード

※ブラウザでの画像縮小アルゴリズムがあまりろよしくないようなので、大きい画像の縮小はレタッチソフトに任せた方が良い

データの送出とサーバ側での画像データの扱いはリンクへ
http://elicon.blog57.fc2.com/blog-entry-107.html

<input type="file" id="files" class="form" name="files[]" multiple />

IMAGES = [];
function resizeImg(image_data){
var img0 = new Image();
img0.src = image_data;
var canvas0 = document.createElement('canvas');

var width = img0.width;
var height = img0.height;
var chouhen = (width>=height) ? width : height;
var new_size = 1024; //px
if (chouhen < new_size){
var canvaswidth = width;
var canvasheight = height;
}
else{
var canvaswidth = parseFloat(new_size)/chouhen * width;
var canvasheight = parseFloat(new_size)/chouhen * height;
}
canvas0.width = parseInt(canvaswidth);
canvas0.height = parseInt(canvasheight);

var context = canvas0.getContext("2d");
context.drawImage(img0, 0, 0, canvaswidth, canvasheight);
var resized_img = canvas0.toDataURL("image/jpeg");
return resized_img;
}

function handleFileSelect(evt) {
var files = evt.target.files; // FileList object

// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}

var reader = new FileReader();

// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
IMAGES.push(resizeImg(e.target.result));
};
})(f);

// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);


            

コメントの投稿

非公開コメント

プロフィール

hMatoba

Author:hMatoba
Github

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

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