HTML5アップロード前に画像のサイズを変更する
これは麺の傷です。
HTML5のローカルストレージとxhr v2があり、何もないことを頭に入れておいてください。誰かが実用的な例を見つけることができるのか、あるいはこの質問に対してyesまたはnoを与えることさえできるのでしょうか。
画像のサイズを変更する手がかりを持たないユーザーが自分のWebサイトに10MBの画像をドラッグできるように、新しいローカルストレージ（またはその他）を使用して画像のサイズを変更することはできますか。小さいサイズでアップロードしてください。
私はあなたがFlash、Javaアプレット、アクティブXを使ってそれを行うことができることを十分に知っています...あなたがJavascript + Html5を使ってできるかどうかという問題です。
これに対する回答を楽しみにしています。
今のところTa。
はい、 File API を使用すると、 canvas要素 を使用して画像を処理できます。
このMozilla Hacksブログ投稿 ほとんどのプロセスを説明しています。参考のために、ブログ投稿から集めたソースコードを次に示します。
// 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
私は数年前にこの問題に取り組み、 https://github.com/rossturner/HTML5-ImageUploader としてgithubに私の解決策をアップロードしました。
robertcの回答は、 Mozilla Hacksブログ投稿 で提案されている解決策を使用していますが、2：1ではないスケール（またはその倍数）にサイズ変更すると、画質が非常に悪くなります。私はさまざまな画像サイズ変更アルゴリズムを試し始めましたが、ほとんどの場合非常に遅くなったか、それ以外の品質では良くありませんでした。
1つのキャンバスから別のキャンバスにコピーするというMozillaのソリューションは、2：1の比率で2：1の比率で画質を損なうことなくすばやく動作するため、最後に、私はすぐに実行でき、非常に優れたパフォーマンスを持つソリューションを思いつきました。 xピクセル幅--- yピクセル高さ、画像がxと2の間になるまでこのキャンバスサイズ変更方法を使用します。x 、そしてyおよび2 y。この時点で、目標サイズにサイズ変更する最後の「ステップ」のためのアルゴリズム的な画像サイズ変更に進みます。いくつかの異なるアルゴリズムを試した後、私はもうオンラインではないが インターネットアーカイブを介してアクセス可能な から得られた双線形補間に取りかかりました。これは適切なコードです：
ImageUploader.prototype.scaleImage = function(img, completionCallback) {
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
while (canvas.width >= (2 * this.config.maxWidth)) {
canvas = this.getHalfScaleCanvas(canvas);
}
if (canvas.width > this.config.maxWidth) {
canvas = this.scaleCanvasWithAlgorithm(canvas);
}
var imageData = canvas.toDataURL('image/jpeg', this.config.quality);
this.performUpload(imageData, completionCallback);
};
ImageUploader.prototype.scaleCanvasWithAlgorithm = function(canvas) {
var scaledCanvas = document.createElement('canvas');
var scale = this.config.maxWidth / canvas.width;
scaledCanvas.width = canvas.width * scale;
scaledCanvas.height = canvas.height * scale;
var srcImgData = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);
var destImgData = scaledCanvas.getContext('2d').createImageData(scaledCanvas.width, scaledCanvas.height);
this.applyBilinearInterpolation(srcImgData, destImgData, scale);
scaledCanvas.getContext('2d').putImageData(destImgData, 0, 0);
return scaledCanvas;
};
ImageUploader.prototype.getHalfScaleCanvas = function(canvas) {
var halfCanvas = document.createElement('canvas');
halfCanvas.width = canvas.width / 2;
halfCanvas.height = canvas.height / 2;
halfCanvas.getContext('2d').drawImage(canvas, 0, 0, halfCanvas.width, halfCanvas.height);
return halfCanvas;
};
ImageUploader.prototype.applyBilinearInterpolation = function(srcCanvasData, destCanvasData, scale) {
function inner(f00, f10, f01, f11, x, y) {
var un_x = 1.0 - x;
var un_y = 1.0 - y;
return (f00 * un_x * un_y + f10 * x * un_y + f01 * un_x * y + f11 * x * y);
}
var i, j;
var iyv, iy0, iy1, ixv, ix0, ix1;
var idxD, idxS00, idxS10, idxS01, idxS11;
var dx, dy;
var r, g, b, a;
for (i = 0; i < destCanvasData.height; ++i) {
iyv = i / scale;
iy0 = Math.floor(iyv);
// Math.ceil can go over bounds
iy1 = (Math.ceil(iyv) > (srcCanvasData.height - 1) ? (srcCanvasData.height - 1) : Math.ceil(iyv));
for (j = 0; j < destCanvasData.width; ++j) {
ixv = j / scale;
ix0 = Math.floor(ixv);
// Math.ceil can go over bounds
ix1 = (Math.ceil(ixv) > (srcCanvasData.width - 1) ? (srcCanvasData.width - 1) : Math.ceil(ixv));
idxD = (j + destCanvasData.width * i) * 4;
// matrix to vector indices
idxS00 = (ix0 + srcCanvasData.width * iy0) * 4;
idxS10 = (ix1 + srcCanvasData.width * iy0) * 4;
idxS01 = (ix0 + srcCanvasData.width * iy1) * 4;
idxS11 = (ix1 + srcCanvasData.width * iy1) * 4;
// overall coordinates to unit square
dx = ixv - ix0;
dy = iyv - iy0;
// I let the r, g, b, a on purpose for debugging
r = inner(srcCanvasData.data[idxS00], srcCanvasData.data[idxS10], srcCanvasData.data[idxS01], srcCanvasData.data[idxS11], dx, dy);
destCanvasData.data[idxD] = r;
g = inner(srcCanvasData.data[idxS00 + 1], srcCanvasData.data[idxS10 + 1], srcCanvasData.data[idxS01 + 1], srcCanvasData.data[idxS11 + 1], dx, dy);
destCanvasData.data[idxD + 1] = g;
b = inner(srcCanvasData.data[idxS00 + 2], srcCanvasData.data[idxS10 + 2], srcCanvasData.data[idxS01 + 2], srcCanvasData.data[idxS11 + 2], dx, dy);
destCanvasData.data[idxD + 2] = b;
a = inner(srcCanvasData.data[idxS00 + 3], srcCanvasData.data[idxS10 + 3], srcCanvasData.data[idxS01 + 3], srcCanvasData.data[idxS11 + 3], dx, dy);
destCanvasData.data[idxD + 3] = a;
}
}
};
これは、元の縦横比を維持しながら、画像をconfig.maxWidthの幅に縮小します。開発時には、これは主要なデスクトップブラウザ（IE9 +、Firefox、Chrome）に加えてiPad/iPhone Safariでも動作していたので、今日のHTML5の普及により、互換性が保たれることを期待しています。 canvas.toDataURL（）呼び出しはMIMEタイプと画像品質を取りますので、品質と出力ファイル形式を制御できます（必要に応じて入力とは異なる可能性があります）。
このメタデータを知らずに画像のサイズを変更してそのまま保存することで、向きに関する情報を維持することができません。これは、タブレットデバイスで撮影した画像が「逆さま」になっていたことを意味します。そのようにレンダリングされますが、それらはデバイスのカメラビューファインダーでは反転されています。これが問題になる場合は、 このブログ記事 にこれを実現する方法に関する優れたガイドとコード例を記載してください。これは上記のコードに統合できると確信しています。
上記の修正
<img src="" id="image">
<input id="input" type="file" onchange="handleFiles()">
<script>
function handleFiles()
{
var filesToUpload = document.getElementById('input').files;
var file = filesToUpload[0];
// Create an image
var img = document.createElement("img");
// Create a file reader
var reader = new FileReader();
// Set the image once loaded into file reader
reader.onload = function(e)
{
img.src = e.target.result;
var canvas = document.createElement("canvas");
//var canvas = $("<canvas>", {"id":"testing"})[0];
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var MAX_WIDTH = 400;
var MAX_HEIGHT = 300;
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");
document.getElementById('image').src = dataurl;
}
// Load files into file reader
reader.readAsDataURL(file);
// Post the data
/*
var fd = new FormData();
fd.append("name", "some_filename.jpg");
fd.append("image", dataurl);
fd.append("info", "lah_de_dah");
*/
}</script>
Justinによる回答 への変更は私のために働きます：
- Img.onloadを追加しました
- 実際の例でPOSTリクエストを展開します
function handleFiles()
{
var dataurl = null;
var filesToUpload = document.getElementById('photo').files;
var file = filesToUpload[0];
// Create an image
var img = document.createElement("img");
// Create a file reader
var reader = new FileReader();
// Set the image once loaded into file reader
reader.onload = function(e)
{
img.src = e.target.result;
img.onload = function () {
var canvas = document.createElement("canvas");
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);
dataurl = canvas.toDataURL("image/jpeg");
// Post the data
var fd = new FormData();
fd.append("name", "some_filename.jpg");
fd.append("image", dataurl);
fd.append("info", "lah_de_dah");
$.ajax({
url: '/ajax_photo',
data: fd,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
$('#form_photo')[0].reset();
location.reload();
}
});
} // img.onload
}
// Load files into file reader
reader.readAsDataURL(file);
}
車輪の再発明を望まないのなら、試してみてください plupload.com
fd.append("image", dataurl);
これはうまくいきません。 PHP側ではファイルを保存できません。
代わりにこのコードを使用してください。
var blobBin = atob(dataurl.split(',')[1]);
var array = [];
for(var i = 0; i < blobBin.length; i++) {
array.Push(blobBin.charCodeAt(i));
}
var file = new Blob([new Uint8Array(array)], {type: 'image/png', name: "avatar.png"});
fd.append("image", file); // blob file
受け入れられた答えは素晴らしい仕事をします、しかし、サイズ変更論理はイメージが1つの軸だけの最大より大きい場合を無視します（例えば、高さ> maxHeightしかし幅<= maxWidth）。
次のコードは、すべてのケースをより直接的で機能的な方法で処理します（プレーンJavaScriptを使用する場合はTypeScript型注釈を無視します）。
private scaleDownSize(width: number, height: number, maxWidth: number, maxHeight: number): {width: number, height: number} {
if (width <= maxWidth && height <= maxHeight)
return { width, height };
else if (width / maxWidth > height / maxHeight)
return { width: maxWidth, height: height * maxWidth / width};
else
return { width: width * maxHeight / height, height: maxHeight };
}
キャンバス要素内の画像のサイズを変更するのは、最も安価なボックス補間を使用するため、一般的にはよくありません。結果として生じる画像は目立って品質が低下します。代わりにLanczos変換を実行できる http://nodeca.github.io/pica/demo/ を使用することをお勧めします。上のデモページはキャンバスとLanczosのアプローチの違いを示しています。
また、Webワーカーを使用して画像を同時にサイズ変更します。 WEBGLの実装もあります。
https://myimageresizer.com のように、仕事をするためにpicaを使用するオンライン画像サイズ変更プログラムがいくつかあります。
TypeScript
async resizeImg(file: Blob): Promise<Blob> {
let img = document.createElement("img");
img.src = await new Promise<any>(resolve => {
let reader = new FileReader();
reader.onload = (e: any) => resolve(e.target.result);
reader.readAsDataURL(file);
});
await new Promise(resolve => img.onload = resolve)
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
let MAX_WIDTH = 1000;
let MAX_HEIGHT = 1000;
let width = img.naturalWidth;
let height = img.naturalHeight;
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;
ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
let result = await new Promise<Blob>(resolve => { canvas.toBlob(resolve, 'image/jpeg', 0.95); });
return result;
}
アップロード機能の前にサイズ変更を行うシンプルで簡単なアップロードマネージャを使用したい場合は、 dropzone.js を使用できます。
それは組み込みのサイズ変更機能を持っています、しかしあなたが望むならあなたはあなた自身のものを提供することができます。