Turn base64 Blob
function base64ToBlob(base64) { return new Promise(resolve => { if (typeof base64 ! == 'string) { return resolve(base64); } const bytes = window.atob(base64.split(",")[1]); Const buffer = new ArrayBuffer(bytes.length); const arr = new Uint8Array(buffer); for (let i = 0; i < bytes.length; i++) { arr[i] = bytes.charCodeAt(i); } resolve(new Blob([buffer], { type: "image/jpeg" })) }); }Copy the codeBase64 transfer the File
function dataURLtoFile(dataurl, filename) { const arr = dataurl.split(","); const mime = arr[0].match(/:(.*?) ; / [1]); const bstr = atob(arr[1]); let n = bstr.length; const u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], filename, { type: mime }); }Copy the codeBase64 to ArrayBuffer object
function base64ToArrayBuffer(base64) { base64 = base64.replace(/^data\:([^\;] +) \; base64,/gmi, ""); const binary = atob(base64); const len = binary.length; const buffer = new ArrayBuffer(len); const view = new Uint8Array(buffer); for (let i = 0; i < len; i++) { view[i] = binary.charCodeAt(i); } return buffer; }Copy the codeGets the exif Angle of the picture
function getOrientation(arrayBuffer) {
const dataView = new DataView(arrayBuffer);
let length = dataView.byteLength;
let orientation;
let exifIDCode;
let tiffOffset;
let firstIFDOffset;
let littleEndian;
let endianness;
let app1Start;
let ifdStart;
let offset;
let i;
// Only handle JPEG image (start by 0xFFD8)
if (dataView.getUint8(0) === 0xFF && dataView.getUint8(1) === 0xD8) {
offset = 2;
while (offset < length) {
if (dataView.getUint8(offset) === 0xFF && dataView.getUint8(offset + 1) === 0xE1) {
app1Start = offset;
break;
}
offset++;
}
}
if (app1Start) {
exifIDCode = app1Start + 4;
tiffOffset = app1Start + 10;
if (getStringFromCharCode(dataView, exifIDCode, 4) === "Exif") {
endianness = dataView.getUint16(tiffOffset);
littleEndian = endianness === 0x4949;
if (littleEndian || endianness === 0x4D4D /* bigEndian */) {
if (dataView.getUint16(tiffOffset + 2, littleEndian) === 0x002A) {
firstIFDOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
if (firstIFDOffset >= 0x00000008) {
ifdStart = tiffOffset + firstIFDOffset;
}
}
}
}
}
if (ifdStart) {
length = dataView.getUint16(ifdStart, littleEndian);
for (i = 0; i < length; i++) {
offset = ifdStart + i * 12 + 2;
if (dataView.getUint16(offset, littleEndian) === 0x0112 /* Orientation */) {
// 8 is the offset of the current tag's value
offset += 8;
// Get the original orientation value
orientation = dataView.getUint16(offset, littleEndian);
// Override the orientation with its default value for Safari (#120)
if (true) {
dataView.setUint16(offset, 1, littleEndian);
}
break;
}
}
}
return orientation;
}
Copy the codeIos image rotation problem
Function rotateImg(img, direction, canvas) {// // tslint:disable-next-line:variable-name const min_step = 0; // tslint:disable-next-line:variable-name const min_step = 0; // tslint:disable-next-line:variable-name const max_step = 3; if (img == null) { return; } const height = img.height; const width = img.width; let step = 2; if (step == null) { step = min_step; } if (direction === "right") { step++; // tslint:disable-next-line:no-unused-expression step > max_step && (step = min_step); } else { step--; // tslint:disable-next-line:no-unused-expression step < min_step && (step = max_step); } const degree = step * 90 * math.pi / 180; const ctx = canvas.getContext("2d"); switch (step) { case 0: canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0); break; case 1: canvas.width = height; canvas.height = width; ctx.rotate(degree); ctx.drawImage(img, 0, -height); break; case 2: canvas.width = width; canvas.height = height; ctx.rotate(degree); ctx.drawImage(img, -width, -height); break; case 3: canvas.width = height; canvas.height = width; ctx.rotate(degree); ctx.drawImage(img, -width, 0); break; }}Copy the codeDetermine if the image exceeds the limit size
function testMaxSize(size, maxSize) { let isAllow = false; isAllow = size <= maxSize; if (! isAllow) { return false; } return isAllow; }Copy the codeRotate the image for a practical example
Const file = 'picture '; const reader = new FileReader(); reader.onload = () => { dealImage(reader.result, file, 800, (data) => { const size = testMaxSize(data.size, 1048576); if (! Size) {message. error(" Pictures are too big, please upload pictures less than 1M "); return; } }) } function dealImage(base64Url, files, w, bacllback) { const newImage = new Image(); let orientation; orientation = getOrientation(base64ToArrayBuffer(base64Url)); newImage.src = base64Url; newImage.onload = async () => { const canvas = document.createElement("canvas"); if (orientation && orientation ! == 1) { if (orientation === 6) { this.rotateImg(newImage, "left", canvas); This. Yasuo (canvas. ToDataURL ("image/jpeg", 0.8), w, callback, files); } else if (orientation === 8) { this.rotateImg(newImage, "right", canvas); This. Yasuo (canvas. ToDataURL ("image/jpeg", 0.8), w, callback, files); } else if (orientation === 3) { this.rotateImg(newImage, "right", canvas); this.rotateImg(newImage, "right", canvas); This. Yasuo (canvas. ToDataURL ("image/jpeg", 0.8), w, callback, files); } } else { this.yasuo(base64Url, w, callback, files); }}; } function yasuo(base64Url, w, callback, files) { let imgWidth; let imgHeight; let blob: any; const img = new Image(); img.src = base64Url; img.onload = async () => { imgWidth = img.width; imgHeight = img.height; const canvas = document.createElement("canvas"); const ctx: any = canvas.getContext("2d"); if (Math.max(imgWidth, imgHeight) > w) { if (imgWidth > imgHeight) { canvas.width = w; canvas.height = w * imgHeight / imgWidth; } else { canvas.height = w; canvas.width = w * imgWidth / imgHeight; } } else { canvas.width = imgWidth; canvas.height = imgHeight; } ctx.drawImage(img, 0, 0, canvas.width, canvas.height); Blob = await this.dataURLtoFile(canvas.toDataURL("image/ JPEG ", 0.8), files.name); callback(blob); }; }Copy the code