H 5写真撮影、選択画像アップロードコンポーネントコア
7675 ワード
背景
この間、プロジェクトは再構築され、SSRのプロジェクトに変更されたが、以前に使用した画像選択アップロードコンポーネントはSSR(server-side-render)をサポートしていなかった.調査を行い、多くのツールを発見しました.しかし、大きすぎて、使うのが面倒で、使う需要を満たしていないものもあります.自分でh 5モバイル端末の画像アップロードコンポーネントを書くことにしました.画像のアップロードは比較的普遍的な需要で、PC端はまだ良くて、モバイル端は特によくありません.次に、プロセス中のいくつかの重要な問題を簡単に記録します.
ポイント
1.inputについて選択機能は、 2.選択プレビュー機能について画像を選択するとプレビューできるのは一般的な機能で、ここではスタイルを捨てて、コード実装だけを話します.onchangeのコールバック関数では、
3.ファイルアップロードの拡張子取得一部機種撮影時にファイルがonchangeイベントで入手したファイルが
4.ios撮影方向取得 iosが写真を撮ってアップロードした後、ファイルが回転していることがわかりました.ローカルファイルは確かに正常です.この問題の原因はここでは詳しく説明しません.興味があれば探してみてください.したがって、orientationを検出し、画像を正常な方向に回転させる必要があります.Exif.jsなどの既存のライブラリを取得します.しかし、このライブラリは少し大きく、この小さな需要のために導入するのはあまり価値がないようです.stackoverflowには、既存のピクチャ方向を取得するコードがたくさんあります.少し変更しました: 5.ios写真方向修正
通常の画像
}
最後に画像をアップロードします.この部分はeasyを比較するべきです.FormData形式でファイルをアップロードすればよい.以上のコードは一部の機能の擬似コードにすぎず,すべての機能の最終的な実現ではない. は振り回されることができて、最後にあなたは発見することができて、多くのものを学んで、しかしやはり他の人の車輪は2333を使いやすいです.
この間、プロジェクトは再構築され、SSRのプロジェクトに変更されたが、以前に使用した画像選択アップロードコンポーネントはSSR(server-side-render)をサポートしていなかった.調査を行い、多くのツールを発見しました.しかし、大きすぎて、使うのが面倒で、使う需要を満たしていないものもあります.自分でh 5モバイル端末の画像アップロードコンポーネントを書くことにしました.画像のアップロードは比較的普遍的な需要で、PC端はまだ良くて、モバイル端は特によくありません.次に、プロセス中のいくつかの重要な問題を簡単に記録します.
ポイント
1.inputについて
accept='image/*'、:captureは、システムのデフォルトのデバイス、例えば、camera--カメラをキャプチャできることを示す.camcorder--カメラ;microphone--レコーディング.capture=「camera」が設定されている場合、デフォルトではカメラが使用され、一部の機種ではカメラを呼び出せないという問題がありますが、ここでは設定しません.multipleの複数選択を許可し、onchangeイベントのコールバック関数を追加します.最終的にinputは大体この様子です:
， input ， `opacity:0`, 。 。
e.target.filesで選択したファイルを手に入れることができますが、ファイルはページに表示されず、通常はreader.readAsDataURL(file)を使用してbase64に変換してページに表示されます.こちらは九宮格展示を採用しています.各画像はcanvasです.異なるピクチャ幅比の問題を考慮して、私はまずreader.readAsDataURL(file)を通じてbase 64ファイルを手に入れます.次に、九宮格のcanvas幅比で画像を描画し、画像の内容が歪みなくcanvas全体に広がるようにします.fileToCanvas (file, index) {//
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (event) => {
let image = new Image();
image.src = event.target.result;
image.onload = () => {
let imageCanvas = this['canvas' + index].getContext('2d');
let canvas = { width: imageCanvas.canvas.scrollWidth * 2, height: imageCanvas.canvas.scrollHeight * 2 };
let ratio = image.width / image.height;
let canvasRatio = canvas.width / canvas.height;
let xStart = 0; let yStart = 0; let renderableWidth; let renderableHeight;
if (ratio > canvasRatio) {
// ， ，
let hRatio = image.height / canvas.height;
renderableHeight = image.height;
renderableWidth = canvas.width * hRatio;
xStart = (image.width - renderableWidth) / 2;
}
if (ratio < canvasRatio) {
// ， ，
let wRatio = image.width / canvas.width;
renderableWidth = image.width;
renderableHeight = canvas.height * wRatio;
yStart = (image.height - renderableHeight) / 2;
}
imageCanvas.drawImage(image, xStart, yStart, renderableWidth, renderableHeight, 0, 0, canvas.width * 2, canvas.height);
};
};
}3.ファイルアップロードの拡張子取得
blob(アワ6など)このときblob.typeで拡張子を手動で判断します.4.ios撮影方向取得
getOrientation (file) {
return new Promise((resolve, reject) => {
let reader = new FileReader();
reader.onload = function (e) {
//e.target.result base64
let view = new DataView(e.target.result);
if (view.getUint16(0, false) !== 0xffd8) {
return resolve(-2);
}
let length = view.byteLength;
let offset = 2;
while (offset < length) {
let marker = view.getUint16(offset, false);
offset += 2;
if (marker === 0xffe1) {
let tmp = view.getUint32(offset += 2, false);
if (tmp !== 0x45786966) {
return resolve(-1);
}
let little = view.getUint16(offset += 6, false) === 0x4949;
offset += view.getUint32(offset + 4, little);
let tags = view.getUint16(offset, little);
offset += 2;
for (let i = 0; i < tags; i++) {
if (view.getUint16(offset + i * 12, little) === 0x0112) {
return resolve(view.getUint16(offset + i * 12 + 8, little));
}
}
} else if ((marker & 0xff00) !== 0xff00) {
break;
} else {
offset += view.getUint16(offset, false);
}
}
return resolve(-1);
};
reader.readAsArrayBuffer(file.slice(0, 64 * 1024));
});
}通常の画像
orientationは1であるべきで、そこで私たちはfileをcanvasに変えて、canvasのtransform方法を使ってcanvasを変換して、参考にします.最後にcanvas.toDataURL('')でbase 64符号化方向の正常なbase 64ピクチャを取得し、base 64をblobに変換してアップロードする.
// orientation
resetOrientationToBlob (file, orientation) {
return new Promise((resolve, reject) => {
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (event) => {
let image = new Image();
image.src = event.target.result;
image.onload = () => {
let width = image.width;
let height = image.height;
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
if (orientation > 4 && orientation < 9) {
canvas.width = height;
canvas.height = width;
} else {
canvas.width = width;
canvas.height = height;
}
switch (orientation) {
case 2:
ctx.transform(-1, 0, 0, 1, width, 0);
break;
case 3:
ctx.transform(-1, 0, 0, -1, width, height);
break;
case 4:
ctx.transform(1, 0, 0, -1, 0, height);
break;
case 5:
ctx.transform(0, 1, 1, 0, 0, 0);
break;
case 6:
ctx.transform(0, 1, -1, 0, height, 0);
break;
case 7:
ctx.transform(0, -1, -1, 0, height, width);
break;
case 8:
ctx.transform(0, -1, 1, 0, 0, width);
break;
default:
ctx.transform(1, 0, 0, 1, 0, 0);
}
ctx.drawImage(image, 0, 0, width, height);
let base64 = canvas.toDataURL('image/png');
let blob = this.dataURLtoBlob(base64);
resolve(blob);
};
};
});}
最後に