BASE64符号化されたバイナリデータ形式、UTF8と同じものです
彼は、JSONのように、しかし、お互いを識別することができ、また前と相互作用データの終了後に、彼はより多くのデータファイルを渡すために使用されます
Base64では、2つがあるのAPI JSで生成された、1はFileReader、キャンバスです。canvas
FileReaderの
<input type="file" onchange="change(this.files[0])">function change(file){
var fr = new FileReader()
fr.onload = function(e) {
// 这个就是base64
console.log( e.target.result );
}
// 这个方法传参是一个Blob类型的格式
fr.readAsDataURL(file)
}キャンバス
我々はキャンバスの上でコンテンツを取得するためにキャンバスを使用し
た入力キャンバスはどのような絵、そして絵カット、ウォーターマークの戦いで
キャンバス上のコンテンツの出力形式は、base64であります
// 这个image就是输入
// 除了new，也可以直接取页面上的标签
var image = new Image();
image.onload = function () {
var w = image.width;
var h = image.height;
var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
canvas.width = w;
canvas.height = h;
ctx.drawImage(image, 0, 0, w, h);
// 可以在这里添加水印或者合并图片什么的
...
// 把画布的内容转成base64，这个就是输出
var base64 = canvas.toDataURL('image/jpeg');
console.log(base64)
}
// 这个src可以是图片地址，也可以是上面fileReader的base64
image.src = "xxx.jpg";あなたはキャンバスの絵を圧縮したい場合
// 压缩比例
var bili = 0.7；
var base64 = canvas.toDataURL('image/jpeg'，bili);互換性のあるキャンバス
キャンバスAPIは非常に非友好的です
- クロスドメインの問題（解決策があるダウンを参照）
- キャンバスIOSシステムは、（それは選択しないで、PSドのいくつかのウェブ版を行う必要がある）が小さすぎました
- カメラは（解決策があるダウン参照）に回転します
キャンバスクロスドメインについて
、クロスドメインソリューションダ神
// 不管画布的输入，即图片的来源是new Image() 还是 document.querySelector()
// 如果图片是外链，产生了跨域，那画布会报错
// Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
// Tainted canvases 【被污染的画布】
// 解决方案是先让后端开启图片支持跨域CORS
// 然后在new Image() 或者 document.querySelector() 之后加上
img.crossOrigin=""キャンバスは、BASE64得るには小さすぎる
、要求応答ヘッダー変更得ることによってBASE64キャンバスピクチャアドレスにより溶液を得ていないblobコードは、フォーマット、及びBASE64にブロブFileReaderのターンので、欠点は、クロスドメイン要求を許可されていません
function getBase64(imgUrl) {
window.URL = window.URL || window.webkitURL;
var xhr = new XMLHttpRequest();
xhr.open("get", imgUrl, true);
// 至关重要
xhr.responseType = "blob";
xhr.onload = function () {
if (this.status == 200) {
//得到一个blob对象
var blob = this.response;
console.log("blob", blob)
// 至关重要
let fr = new FileReader();
fr.onloadend = function (e) {
let base64 = e.target.result;
console.log(base64)
};
fr.readAsDataURL(blob);
var img = document.createElement("img");
img.onload = function (e) {
window.URL.revokeObjectURL(img.src); // 清除释放
};
let src = window.URL.createObjectURL(blob);
console.log(src)
img.src = src;
document.getElementById("xxx").appendChild(img);
}
}
xhr.send();
}
getBase64("xx.png")ブロブについて
ブロブの知識の上に使用して
実際には、Fileオブジェクトのonchange入力から返された画像オブジェクト。
Blobオブジェクトは、容器包装、BLOBからファイルの継承のために使用されるバイナリファイルです。
FileReaderのは、メモリのAPIファイルを読み取るために使用され、支持体は、ブロブ形式ファイル。
FileReaderのとURL.createObjectURL差
ユーザーナゲッツからの情報
違い
- 一部のデータはFileReader.readAsDataURL（ファイル）により得ることができる：base64文字列
- メモリはURL.createObjectURLにより、現在のファイルのURLを得ることができる（ブロブ）
両者の差
- createObjectURLが同期的に実行される（直ちに）
- FileReader.readAsDataURLが非同期に実行される（時間の経過）
三つの違い
- ハッシュとURLのcreateObjectURLリターン、および文書がアンロードイベントをトリガーするまでメモリに格納されている（例：ドキュメント近い）またはリリースされるrevokeObjectURLを行います。
- FileReader.readAsDataURL base64方式は、多くの文字リターンが含まれており、ブロブのURLより多くのメモリを消費しますが、自動的に使用しないときは（ガベージコレクションによって）メモリから消去されます
三つの違い
- createObjectURLはIE10アップからのすべての近代的なブラウザをサポートしています
- FileReader.readAsDataURLもIE10アップからのすべての近代的なブラウザをサポートしています
以下のためのカメラの回転原因と解決策
ユーザーナゲッツからの情報
なぜそれを得るために、あなたのカメラから画像を回転させるのでしょうか？
EXIF（画像ファイルフォーマット）の撮影した写真から写真を撮るためにカメラには、デフォルトの向きのタグが設定されますので
、現在唯一のJPEG形式の画像にはなります
するためのソリューションがあります
EXIF.jsプラグと画像取得orientation裁判官
とライトEXIF.js DataViewAPI stackoverflowのコードからは、
function getOrientation(file, callback) {
var reader = new window.FileReader();
reader.onload = function (e) {
var view = new window.DataView(e.target.result);
if (view.getUint16(0, false) != 0xFFD8) {
return callback(-2);
}
var length = view.byteLength, offset = 2;
while (offset < length) {
var marker = view.getUint16(offset, false);
offset += 2;
if (marker == 0xFFE1) {
if (view.getUint32(offset += 2, false) != 0x45786966) {
return callback(-1);
}
var little = view.getUint16(offset += 6, false) == 0x4949;
offset += view.getUint32(offset + 4, little);
var tags = view.getUint16(offset, little);
offset += 2;
for (var i = 0; i < tags; i++) {
if (view.getUint16(offset + (i * 12), little) == 0x0112) {
return callback(view.getUint16(offset + (i * 12) + 8, little));
}
}
} else if ((marker & 0xFF00) != 0xFF00) {
break;
} else {
offset += view.getUint16(offset, false);
}
}
return callback(-1);
};
reader.readAsArrayBuffer(file);
}
// 将图片旋转到正确的角度
function resetOrientation(srcBase64, srcOrientation, callback) {
var img = new Image();
img.onload = function() {
var width = img.width,
height = img.height,
canvas = document.createElement('canvas'),
ctx = canvas.getContext("2d");
// set proper canvas dimensions before transform & export
if ([5,6,7,8].indexOf(srcOrientation) > -1) {
canvas.width = height;
canvas.height = width;
} else {
canvas.width = width;
canvas.height = height;
}
// transform context before drawing image
// -2: not jpeg
// -1: not defined
switch (srcOrientation) {
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);
}
// draw image
ctx.drawImage(img, 0, 0);
// export base64
callback(canvas.toDataURL('image/jpeg'));
};
img.src = srcBase64;
};そして、正しいBASE64を生成するには、右にキャンバスを回転させた後、キャンバスの互換性の問題も非常に友好的ああです
可能な限り行うことができない携帯電話のキャンバス上の必要性がある場合は、PCクライアントは、キャンバスのアルバムはマイクロ手紙が付属していないが、マイクロチャネル対応の携帯電話が取得しようとしているが、携帯電話側を最大限に活用することで行うことができ、これが理由ですその後、互換性はまた、「マイクロチャネル公共番号」の記事のためのマイクロ文字のコード、非常に良いですが、他の誰かのプラットフォームのWebページの良い場所、APIの数を行います