JavaScriptで縮小画像を作成してサーバーにPOST送信する方法

Posted on 2014年10月21日 23:37 by amyu

本日、JavaScriptで縮小画像の作成 | while(isプログラマ)のコメント欄にて、慎之助さんから下記のようにコメントがありました。

「画像を縮小して表示」サンプルと
「canvasで描いた絵をバイナリ形式でサーバーにPOST送信する方法 | while(isプログラマ)」のサンプルを元にして、
「JavaScriptで縮小画像を作成してサーバーにPOST送信する方法」を試行錯誤しながら作っていますが、なかなか出来ません。
そのやり方のサンプルを掲載されることを、とてもとても楽しみにいたしております。

canvasで描いた絵をバイナリ形式でサーバーにPOST送信する方法 | while(isプログラマ)を使って縮小画像をサーバーに送りたいのだけれども、できないということらしい。

自分も上記エントリーの最後に「できそうです」と書いているものの、実際に試したわけではないので、今回試してみました。

とりあえず、『JavaScriptで縮小画像の作成』で作ったサンプルページをもとに、それをPOST送信するようなプログラムを作ってみることにします。利用するサーバー側プログラムのPHPは『canvasで描いた絵をバイナリ形式でサーバーにPOST送信する方法』でも利用したPHPを何も変更せずに利用することに。

結論からいうと、できました。
サンプルページ：画像を縮小して表示してPOSTでサーバーに送信
画像をアップすると、その下にアップした画像を指定分縮小した画像が表示されます。ファイルを選択するとすぐにアップロードする仕組みになっているので、ネットに公開したくない画像を間違って選択してしまわないように注意してください。もし間違えた場合は、すぐに公開してもいい画像をアップロードしてください。

『JavaScriptで縮小画像の作成』で作ったサンプルページの変更点としては、jQueryを使ってなかったので、jQueryを呼び出し、base64形式の文字列をBLOB形式にするbase64ToBlobという関数とBLOB形式のファイルをPOSTで送信するsendImageBinary関数を追加しています。

// バイナリ化した画像をPOSTで送る関数
// http://blog.sarabande.jp/post/30694191998
var sendImageBinary = function(blob) {
	var formData = new FormData();
	formData.append('acceptImage', blob);
	$.ajax({
		type: 'POST',
		url: 'image-accept2.php',
		data: formData,
		contentType: false,
		processData: false,
		success:function(date, dataType){
			var $img = $('img');
			var imgSrc = $img.attr('src');
			$img.attr('src', "");
			$img.attr('src', imgSrc + '?' + (new Date())*1);
		},
		error: function(XMLHttpRequest, textStatus, errorThrown){
		}
	});
};

// 引数のBase64の文字列をBlob形式にしている
var base64ToBlob = function(base64){
	var base64Data = base64.split(',')[1], // Data URLからBase64のデータ部分のみを取得
		data = window.atob(base64Data), // base64形式の文字列をデコード
		buff = new ArrayBuffer(data.length),
		arr = new Uint8Array(buff),
		blob, i, dataLen;
	
	// blobの生成
	for( i = 0, dataLen = data.length; i < dataLen; i++){
		arr[i] = data.charCodeAt(i);
	}
	blob = new Blob([arr], {type: 'image/png'});
	return blob;
}

// バイナリ化した画像をPOSTで送る関数

// http://blog.sarabande.jp/post/30694191998

var sendImageBinary = function(blob) {

var formData = new FormData();

formData.append('acceptImage', blob);

$.ajax({

type: 'POST',

url: 'image-accept2.php',

data: formData,

contentType: false,

processData: false,

success:function(date, dataType){

var $img = $('img');

var imgSrc = $img.attr('src');

$img.attr('src', "");

$img.attr('src', imgSrc + '?' + (new Date())*1);

error: function(XMLHttpRequest, textStatus, errorThrown){

}

});

};

// 引数のBase64の文字列をBlob形式にしている

var base64ToBlob = function(base64){

var base64Data = base64.split(',')[1], // Data URLからBase64のデータ部分のみを取得

data = window.atob(base64Data), // base64形式の文字列をデコード

buff = new ArrayBuffer(data.length),

arr = new Uint8Array(buff),

blob, i, dataLen;

// blobの生成

for( i = 0, dataLen = data.length; i < dataLen; i++){

arr[i] = data.charCodeAt(i);

}

blob = new Blob([arr], {type: 'image/png'});

return blob;

}

後は、canvasのtoDataURLメソッドでBase64形式の文字列を取得し、それをbase64ToBlobの引数にいれて、さらにその戻り値をsendImageBinaryの引数にいれるということをしています。

// POST送信
var blob = base64ToBlob(canvas.toDataURL());
sendImageBinary(blob);

// POST送信

var blob = base64ToBlob(canvas.toDataURL());

sendImageBinary(blob);

ただ、そもそも慎之助さんがどこで躓いていたのかが分からないので、注意点を言っておくと、古いブラウザだと動きません。例えば、IEだと10以降でないと動きません。また、サーバーの設定でファイルの作成や書き込みができないようになっているとうまくいきませんし、アップする画像が大きい場合にもうまくいかない可能性があります。

さて、ここまできたら、ExifのOrientationを見たうえでcanvasに画像を表示できるJSライブラリ | while(isプログラマ)で書いた内容をもとに、Exifも考慮して縮小画像を作成し、POSTで送信するということもできるはずです。そこまでは実装してませんが、興味ある人は試してみてください。

CSSとJSで要素の背景にcanvas画像を設定する方法

Posted on 2014年6月19日 22:45 by amyu

Pocket

WebKit系とFirefox限定です(IEでは利用できない)。

CSSのbackgroundプロパティにおいて、WebKit系のブラウザにはcanvas()関数、Firefoxではelement()関数という値が指定できます。canvas()関数は、canvasに描画したものを背景に設定できる関数で、element()関数は指定の要素を画像として扱い背景にすることができます(残念ながら、背景にしかできない)。

で、これに関連してWebKit系のブラウザのJavaScriptにはgetCSSCanvasContextメソッド、FirefoxにはmozSetImageElementメソッドというものが用意されています。これは、どちらもブラウザ上でcanvasを作成し、ブラウザ上にcanvasを描画せずにcanvas画像を背景に設定できる機能です(参考：[CSS3] (Webkit専用) CSSを用いて要素の背景にCanvasを指定する – YoheiM .NET、CSSのelement()関数 – Weblog – Hail2u.net)。

関数が違うので、どちらも共通の指定でcanvasの背景画像を作成できるように関数を作ってみました。

function getBgCanvas(id, width, height){
    var ctx = false;
    if(document.getCSSCanvasContext){ // webkit用の指定
        ctx = document.getCSSCanvasContext('2d', id, width, height);
    }else if(document.mozSetImageElement){ // Firefox用の指定
        var canvas = document.createElement('canvas');
        canvas.setAttribute("width", width);
        canvas.setAttribute("height", height);
        ctx = canvas.getContext('2d');
        document.mozSetImageElement(id, canvas);
    }
    return ctx;
}

function getBgCanvas(id, width, height){

var ctx = false;

if(document.getCSSCanvasContext){ // webkit用の指定

ctx = document.getCSSCanvasContext('2d', id, width, height);

}else if(document.mozSetImageElement){ // Firefox用の指定

var canvas = document.createElement('canvas');

canvas.setAttribute("width", width);

canvas.setAttribute("height", height);

ctx = canvas.getContext('2d');

document.mozSetImageElement(id, canvas);

}

return ctx;

}

この関数からえたコンテキストを利用すると、WebKit系でもFirefoxでも同じ処理で背景用canvasを取得できます。
利用例は以下のような感じ。

var ctx = getBgCanvas('background', 100, 400);
// ピンクの丸
ctx.beginPath();
ctx.strokeStyle = '#F8C1C6';
ctx.fillStyle = '#F8C1C6';
ctx.arc(50,50,50,0,Math.PI*2,true);
ctx.fill();
ctx.stroke();
// 白の丸
ctx.beginPath();
ctx.strokeStyle = '#E3D8C4';
ctx.fillStyle = '#E3D8C4';
ctx.arc(50,150,50,0,Math.PI*2,true);
ctx.fill();
ctx.stroke();
// 緑の丸
ctx.beginPath();
ctx.strokeStyle = '#849865';
ctx.fillStyle = '#849865';
ctx.arc(50,250,50,0,Math.PI*2,true);
ctx.fill();
ctx.stroke();
//茶色い長方形
ctx.fillStyle = '#D8CFAF';
ctx.fillRect(45,300,10,100);

var ctx = getBgCanvas('background', 100, 400);

// ピンクの丸

ctx.beginPath();

ctx.strokeStyle = '#F8C1C6';

ctx.fillStyle = '#F8C1C6';

ctx.arc(50,50,50,0,Math.PI*2,true);

ctx.fill();

ctx.stroke();

// 白の丸

ctx.beginPath();

ctx.strokeStyle = '#E3D8C4';

ctx.fillStyle = '#E3D8C4';

ctx.arc(50,150,50,0,Math.PI*2,true);

ctx.fill();

ctx.stroke();

// 緑の丸

ctx.beginPath();

ctx.strokeStyle = '#849865';

ctx.fillStyle = '#849865';

ctx.arc(50,250,50,0,Math.PI*2,true);

ctx.fill();

ctx.stroke();

//茶色い長方形

ctx.fillStyle = '#D8CFAF';

ctx.fillRect(45,300,10,100);

CSSは下記のように書きます。

#bg-canvas{
    background-image: -moz-element(#background);
    background: -webkit-canvas(background);
    height:400px;
}

#bg-canvas{

background-image: -moz-element(#background);

background: -webkit-canvas(background);

height:400px;

}

というわけで、以下実行サンプルです。

正直、そこまで実用性があるわけではなさそうですが、こういうことができるという紹介。IEにも対応したい場合は、canvasのtoDataURLでBase64の画像データを取得して、それをJavaScriptを用いて要素の背景に設定するという方法でできそうです(というより、それでcanvasに対応している全てのブラウザに対応できる)。

HTML5のcanvasで描画する文字の後ろに白地をつける方法

Posted on 2014年6月8日 12:17 by amyu

返信

Pocket

本題に入る前に一つ問題です。Canvasで文字を描画(fillTextメソッドを利用)する時、文字の縦基準位置を指定しない、つまりデフォルトの場合、文字は指定座標にたいしてどの位置に描画されるでしょう。次の3つの中からお選びください(点は指定座標の位置)


文字より上の位置	文字の縦中央の位置	文字より下の位置

続きを読む →

canvasのお絵描きツールに拡大機能をつけてみる

Posted on 2014年4月13日 23:09 by amyu

返信

Pocket

久々にcanvasのお絵描きツールに機能を追加してみた。今回追加した機能は拡大機能。

最初は、拡大画像用のcanvasを新たに作成してそこにdrawImageメソッドを使って、拡大した部分を描画し、終わったらその拡大画像用のcanvasを逆にdrawImageメソッドで元のcanvasに描画したらいけるかなぁ・・・。なんて思っていたのですが、どうにもそのやり方に少し抵抗があってなかなか手につけられずにいました。『canvas 拡大』と検索するとcanvasのtransformメソッドについてでてきましたが、何か違う気がします。あくまで今から描画する図形に対しての指定みたいなので。

ただ、transformという単語をみてふと思いました。そういえば、CSS3にtransformというプロパティがあったよな・・・と(参考：transform – CSS | MDN)。

結論からいうと、このtransformプロパティを使ってお絵描きツールの拡大機能を実装することができました。というわけで、以下そのソースコードの説明。

とりあえず、今までcanvas部分にはボーダーをつけていたのですが、transformで拡大するとボーダーまで拡大してしまうので、divタグで囲んでそのdivタグにボーダーをつけることに。

HTML

XHTML

<div id="CanvasDiv"> <canvas width="400" height="200" id="mycanvas"> Canvasに対応したブラウザを用意してください。 </canvas> </div>

1
2
3
4
5

<div id="CanvasDiv">
    <canvas width="400" height="200" id="mycanvas">
        Canvasに対応したブラウザを用意してください。
    </canvas>
</div>

CSS

#CanvasDiv{
    border: 10px solid #999;
    cursor:crosshair;
    width:400px;
    height:200px;
    float:left;
    overflow: hidden;
}
#mycanvas{
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    -webkit-transform-origin:0 0;
    transform-origin:0 0;
}

#CanvasDiv{

border: 10px solid #999;

cursor:crosshair;

width:400px;

height:200px;

float:left;

overflow: hidden;

}

#mycanvas{

-moz-transform-origin:0 0;

-ms-transform-origin:0 0;

-webkit-transform-origin:0 0;

transform-origin:0 0;

}

また、canvasを拡大するとdivタグからはみ出して表示されてしまうので、overflowプロパティをhiddenにして拡大してはみ出した部分は非表示とすることに。そして、transform-originプロパティで拡大するときの原点を要素の左上に指定しています(参考：transform-origin – CSS | MDN)。

つづいてメインの拡大機能の実装部分。拡大機能にはラジオボタン選択ではなく、Hammer.jsを使ってダブルクリック(もしくはダブルタップ)すると2倍に拡大することにしました。

JavaScript

// ダブルタップ(ダブルクリック)で二倍に拡大
Hammer($('#mycanvas')[0]).on("doubletap", function(e){
    scaleFactor = 3 - scaleFactor; // 2なら1、1なら2
    //console.log("scaleFactor:" + scaleFactor);
    if(scaleFactor === 2){
        var topLeftX = e.gesture.center.pageX - $(this).offset().left -(canvas.width/4);
        var topLeftY = e.gesture.center.pageY - $(this).offset().top -(canvas.height/4);
        if(topLeftX < 0){
            topLeftX = 0;
        }else if(topLeftX > canvas.width/2){
            topLeftX = canvas.width/2;
        }
        if(topLeftY < 0){
            topLeftY = 0;
        }else if(topLeftY > canvas.height/2){
            topLeftY = canvas.height/2;
        }

        var transformStyle = 'scale(%{scale}) translate(%{tx}px, %{ty}px)';
        transformStyle = transformStyle.replace('%{scale}', scaleFactor);
        transformStyle = transformStyle.replace('%{tx}', -topLeftX);
        transformStyle = transformStyle.replace('%{ty}', -topLeftY);
        //console.log("transformStyle:" + transformStyle);
        $(this).css('transform', transformStyle);


    }else{
        $(this).css('transform', '');
    }
});

// ダブルタップ(ダブルクリック)で二倍に拡大

Hammer($('#mycanvas')[0]).on("doubletap", function(e){

scaleFactor = 3 - scaleFactor; // 2なら1、1なら2

//console.log("scaleFactor:" + scaleFactor);

if(scaleFactor === 2){

var topLeftX = e.gesture.center.pageX - $(this).offset().left -(canvas.width/4);

var topLeftY = e.gesture.center.pageY - $(this).offset().top -(canvas.height/4);

if(topLeftX < 0){

topLeftX = 0;

}else if(topLeftX > canvas.width/2){

topLeftX = canvas.width/2;

}

if(topLeftY < 0){

topLeftY = 0;

}else if(topLeftY > canvas.height/2){

topLeftY = canvas.height/2;

}

var transformStyle = 'scale(%{scale}) translate(%{tx}px, %{ty}px)';

transformStyle = transformStyle.replace('%{scale}', scaleFactor);

transformStyle = transformStyle.replace('%{tx}', -topLeftX);

transformStyle = transformStyle.replace('%{ty}', -topLeftY);

//console.log("transformStyle:" + transformStyle);

$(this).css('transform', transformStyle);

}else{

$(this).css('transform', '');

}

});

これで拡大はうまくいきました。scaleFactorという変数が拡大率を表しています。もう一度ダブルクリックすると元の大きさに戻るようにもしています。

ただ、これだと拡大した後に描画しようとすると、ペン先の位置が右下にズレてしまうので、描画のx座標とy座標をscaleFactorで除算することに。

x = thisX - $(this).offset().left - borderWidth;
y = thisY - $(this).offset().top - borderWidth;
x /= scaleFactor;
y /= scaleFactor;

x = thisX - $(this).offset().left - borderWidth;

y = thisY - $(this).offset().top - borderWidth;

x /= scaleFactor;

y /= scaleFactor;

以下、動作サンプル。
canvasを使ったお絵描き投稿システム

拡大するときには『塗りつぶし』ではなく、『ペン』を選ぶようにしてください。塗りつぶしを選んでいる状態だとおかしな動きになりました(いまさらだけど、やっぱり普通にラジオボタンで『拡大』を増やしてそこで拡大するかどうかを判定すればよかったかもしれない)。

今回作った機能はcanvasの拡大だけではなく、画像の拡大なんかにも利用できそうです。縮小した画像を表示させといて、ダブルクリックするとその位置を拡大するというような動きにしたり(試してませんが)。

ExifのOrientationを見たうえでcanvasに画像を表示できるJSライブラリ

Posted on 2014年4月11日 00:14 by amyu

返信

Pocket

先日、画像を縮小して表示するページを作成してこのブログで紹介しました(JavaScriptで縮小画像の作成 | while(isプログラマ))。

ただ、このページからiPadやiPod touchで開いたうえで、ファイルの選択から『写真を撮る』を選び、縦向き(縦長)にして写真を撮ってみると、縮小した写真は横向きに表示されてしまいました。これは、写真が標準で縦表示になっているわけではなく、Exif情報のOrientation(向き情報)によって縦方向の写真となっているためにおこります。HTML5のcanvasではどうやらExif情報を考慮してくれないようで、そのため縦に撮った写真が横に表示されてしまったというわけです(それどころか、Orientationによって縦表示とされている写真をimgタグで普通に表示させても、PCのブラウザからは横表示になってしまうという)。

ただ、これでは少し困るのでOrientationを見たうえで実際の方向通りにcanvasに描画する方法はないものかと思って探してみたところ、『JavaScript Load Image』というJavaScriptライブラリを見つけました。相変わらず英語は苦手なので全部わかったわけではないのですが、どうもExif情報を見るライブラリらしく、Exif情報を見たうえで画像をcanvasに表示することができるライブラリだそう。サンプルを使ってみると確かにOrientationで縦向きとなっている画像が、縦向きになってcanvasに描画されました。これはすごいよさそうです。

というわけで、上記ライブラリを用いたうえで、先日の画像縮小ページのJavaScript部分を下記のように変更してみました。

var captureForm = document.querySelector('#inputFile');

  // ファイルを選んだ時の処理
  captureForm.addEventListener('change', function() {    
    var file = this.files[0],
        image = new Image(),
        reader = new FileReader(),
        reduceFlag = document.querySelector('input[name="reduceFlag"]:checked') ? +document.querySelector('input[name="reduceFlag"]:checked').value : 0;
        size = +document.querySelector('#imageSize' + reduceFlag).value;
    if (file.type.match(/image.*/)) {
      reader.onloadend = function() {
        image.onload = function() {
            var width = 0;
            var options = {canvas:true};
            var currentFile = file;

            console.log("size:");
            console.log(size);
            // Orientationの設定
            loadImage.parseMetaData(currentFile, function (data) {
                if(reduceFlag == 1){ // ラジオボタンで指定した値
                    width = size;
                }
                if (data.exif) {
                    options.orientation = data.exif.get('Orientation');

                    for( key in data.exif.map){
                        var value = data.exif[data.exif.map[key]];
                        if(value){
                            console.log(key + ':' + data.exif[data.exif.map[key]]); // Exif情報の出力
                        }
                    }

                    if(reduceFlag != 1){ // ラジオボタンで指定した値
                        console.log("reduceFlag:" + reduceFlag);
                        if(options.orientation >= 5){
                            width = image.height * (size/100);
                        }else{
                            width = image.width * (size/100);
                        }
                    }
                }
                options.maxWidth = width;
            });

            loadImage(
                currentFile,
                function (canvas) {
                    document.querySelector('body').appendChild(canvas); // canvasの表示
                },
                options // Options
            );
        }
        image.src = reader.result;
      }
      reader.readAsDataURL(file);
    }

  }, false);

var captureForm = document.querySelector('#inputFile');

// ファイルを選んだ時の処理

captureForm.addEventListener('change', function() {

var file = this.files[0],

image = new Image(),

reader = new FileReader(),

reduceFlag = document.querySelector('input[name="reduceFlag"]:checked') ? +document.querySelector('input[name="reduceFlag"]:checked').value : 0;

size = +document.querySelector('#imageSize' + reduceFlag).value;

if (file.type.match(/image.*/)) {

reader.onloadend = function() {

image.onload = function() {

var width = 0;

var options = {canvas:true};

var currentFile = file;

console.log("size:");

console.log(size);

// Orientationの設定

loadImage.parseMetaData(currentFile, function (data) {

if(reduceFlag == 1){ // ラジオボタンで指定した値

width = size;

}

if (data.exif) {

options.orientation = data.exif.get('Orientation');

for( key in data.exif.map){

var value = data.exif[data.exif.map[key]];

if(value){

console.log(key + ':' + data.exif[data.exif.map[key]]); // Exif情報の出力

}

if(reduceFlag != 1){ // ラジオボタンで指定した値

console.log("reduceFlag:" + reduceFlag);

if(options.orientation >= 5){

width = image.height * (size/100);

}else{

width = image.width * (size/100);

}

options.maxWidth = width;

});

loadImage(

currentFile,

function (canvas) {

document.querySelector('body').appendChild(canvas); // canvasの表示

options // Options

);

}

image.src = reader.result;

}

reader.readAsDataURL(file);

}

}, false);

以下、実行サンプル。
画像を縮小して表示

Base64形式のURI Dataの画像をいれても画像は表示されるようなのですが、Exif情報が取得できませんでした(そのため、わざわざ画像をロードしたうえで、その幅を取得している)。

Exif情報が取得できた場合、開発者ツールのコンソール画面に一覧して表示するようにしてみました。PCにExif情報のついた写真がある場合はそれをアップしてみて確認してください。Exif情報と一言でいっても、いろんな情報があるものですね。自分でも試してみましたが、ほとんどundefinedでした(表示している一覧はundefinedとなった情報は省いています)。

while(isプログラマ)

ころころ興味対象が変わるプログラマの技術ブログ(多分)

「canvas」タグアーカイブ

JavaScriptで縮小画像を作成してサーバーにPOST送信する方法

CSSとJSで要素の背景にcanvas画像を設定する方法

HTML5のcanvasで描画する文字の後ろに白地をつける方法

canvasのお絵描きツールに拡大機能をつけてみる

CSS

JavaScript

ExifのOrientationを見たうえでcanvasに画像を表示できるJSライブラリ