js 读取图片扩展信息
将图片转为ArrayBuffer
var http = new XMLHttpRequest();
http.onload = function() {
if (this.status == 200 || this.status === 0) {
let arrbuffer = http.response;
}
http = null;
};
http.open("GET", img.src, true);
http.responseType = "arraybuffer";
http.send(null);
ps: responseType为blob也可以,将返回的blob用fileReader转为ArrayBuffer
截取ArrayBuffer,获取扩展信息起始位置和结束位置
function findIPTCinJPEG(arrBuffer)) {
var dataView = new DataView(arrBuffer);
var offset = 0,
length = arrBuffer.byteLength;
var isFieldSegmentStart = function(dataView, offset){
return dataView.getUint16(offset) === 0xFFE1;
};
while (offset < length) {
if (isFieldSegmentStart(dataView, offset)){
break;
}
offset++;
}
return offset
}
let i = findIPTCinJPEG(arrbuffer);
let start = i + 2 + 2;
let end = start + 8 + 4 + 16 + 16;
let sliceBuffer = arrbuffer.slice(start, end);
根据编码格式解析ArrayBuffer
function ab2str(u, fn) {
var b = new Blob([u]);
var r = new FileReader();
r.readAsText(b, 'utf-8');
r.onload = function (){
let content = r.result;
let arr = content.split('\x00\x00\x00\x00\x00\x00')
fn(arr);
}
}
将解析后的信息,给图片打水印
<img :src="picSrc" style="width: 600px;height: 400px"/>
let blob = new Blob([arrbuffer], {type: "image/jpeg"});
let picSrc = window.URL.createObjectURL(blob);
let image = new Image();
image.crossOrigin = 'anonymous';
image.src = picSrc;
image.onload = function() {
const w = image.width;
const h = image.height;
let originCanvas = document.createElement("canvas");
let ctx = originCanvas.getContext("2d");
originCanvas.setAttribute("width", w);
originCanvas.setAttribute("height", h);
ctx.drawImage(image, 0, 0);
ctx.font = '100px Helvetica Neue';
ctx.fillStyle = "white";
ctx.textBaseline = "middle";
ctx.fillText(str[0], 100, 150);
ctx.fillText(str[1], 500, 150);
ctx.fillText(str[2], 1100, 150);
let src1 = originCanvas.toDataURL("image/jpeg");
that.picSrc = src1;
let fileData = dataURLtoFile(src1, "image");
window.URL.revokeObjectURL(picSrc);
};
function dataURLtoFile(dataurl, filename) {
let arr = dataurl.split(",");
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
}