アップロード画像canvas jquery

Question

いくつかの依存関係については、私がサーバーにアップロードする必要があるのは670 X 525 px（ユーザーがアップロードする画像の元のサイズ）です。だから、アイデアは、サーバーにブロブをアップロードし、それをBLOBにキャンバスはcanvasContext.drawImage(0, 0, myimageSelector.naturalWidth, myimageSelector.naturalHeight, 0, 0, 670, 525);

キャンバス

にドロー画像に変換し、それが働きました。

var dataUrl= mycanvasSelector.toDataUrl('image/png'); 
var blob = convertDataUrlToBlob(dataUrl); 
// upload blob as image 
... 

しかし、私がアップロードした画像をサーバで見ると、画像サイズが元の画像サイズに比べて少なくとも5倍に増加していることがわかりました。アップロードする前にサイズを減らすという考えはありますか？ありがとう

Answer 1

はい、File APIを使用すると、canvas elementで画像を処理できます。

This Mozilla Hacks blogポストは、ほとんどのプロセスを説明します。参考のために、ブログ記事の組み立てられたソースコードを以下に示します：

// from an input element 
var filesToUpload = input.files; 
var file = filesToUpload[0]; 

var img = document.createElement("img"); 
var reader = new FileReader(); 
reader.onload = function(e) {img.src = e.target.result} 
reader.readAsDataURL(file); 

var ctx = canvas.getContext("2d"); 
ctx.drawImage(img, 0, 0); 

var MAX_WIDTH = 800; 
var MAX_HEIGHT = 600; 
var width = img.width; 
var height = img.height; 

if (width > height) { 
    if (width > MAX_WIDTH) { 
    height *= MAX_WIDTH/width; 
    width = MAX_WIDTH; 
    } 
} else { 
    if (height > MAX_HEIGHT) { 
    width *= MAX_HEIGHT/height; 
    height = MAX_HEIGHT; 
    } 
} 
canvas.width = width; 
canvas.height = height; 
var ctx = canvas.getContext("2d"); 
ctx.drawImage(img, 0, 0, width, height); 

var dataurl = canvas.toDataURL("image/png"); 

//Post dataurl to the server with AJAX