js 读取图片扩展信息
将图片转为ArrayBuffer
var http = new XMLHttpRequest();
http.onload = function() {
if (this.status == 200 || this.status === 0) {
// console.log(http.response)
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)) {
// arrayBuffer 是二进制数据，不能够直接读取，需要借助dataView接口进行处理
var dataView = new DataView(arrBuffer);
var offset = 0,
length = arrBuffer.byteLength;
// 标识位信息是FFE1，为16进制
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);
/**
* 第一个2表示 FF E1 2字节
* 第二个2表示 00 00 2字节
*/
let start = i + 2 + 2;
/**
* 第一个8表示公司名称，8字节
* 第二个4空 4字节
* 第三个16表示泊位号 16字节
* 第四个16表示车牌号 16字节
*/
let end = start + 8 + 4 + 16 + 16;
let sliceBuffer = arrbuffer.slice(start, end);
根据编码格式解析ArrayBuffer
// 利用fileReader读取二进制数据，解析为文本
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;
// ai 1234567890 京A12345
let arr = content.split('\x00\x00\x00\x00\x00\x00')
fn(arr);
}
}
将解析后的信息，给图片打水印
<img :src="picSrc" style="width: 600px;height: 400px"/>
// ArrayBuffer转blob
let blob = new Blob([arrbuffer], {type: "image/jpeg"});
// blob转文件
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;
// 创建canvas绘制原图
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;
// 将base64转为文件
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 });
}
