Firefoxにはcanvas.toBlob()メソッドとcanvas.mozGetAsFile()メソッドがあります。
しかし、他のブラウザはそうではありません。
canvasからdataurlを取得し、dataurlをblobオブジェクトに変換できます。
これが私のdataURLtoBlob()
機能です。とても短いです。
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}
この関数をFormDataと共に使用して、キャンバスまたはdataurlを処理します。
例えば:
var dataurl = canvas.toDataURL('image/jpeg',0.8);
var blob = dataURLtoBlob(dataurl);
var fd = new FormData();
fd.append("myFile", blob, "thumb.jpg");
また、HTMLCanvasElement.prototype.toBlob
Geckoエンジン以外のブラウザ用のメソッドを作成することもできます。
if(!HTMLCanvasElement.prototype.toBlob){
HTMLCanvasElement.prototype.toBlob = function(callback, type, encoderOptions){
var dataurl = this.toDataURL(type, encoderOptions);
var bstr = atob(dataurl.split(',')[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
var blob = new Blob([u8arr], {type: type});
callback.call(this, blob);
};
}
今canvas.toBlob()
のFirefoxだけでなく、すべての最新ブラウザで動作します。例えば:
canvas.toBlob(
function(blob){
var fd = new FormData();
fd.append("myFile", blob, "thumb.jpg");
//continue do something...
},
'image/jpeg',
0.8
);