前端-DataURL的⼏种处理⽅式及相互间的转换
⼀、显⽰图⽚
如果想在前端显⽰⼀张图⽚，那么后端传过来的数据格式有三种。
1. 图⽚链接
不但⼀定链接是要⽂件存放的地址，如 ‘XXX/img.png’，‘aaa/bbb’ 这样的地址，只要返回的是个图⽚就可以，就可以直接放路径⾥
const imgScr = "xx.png"
<img src={imgSrc} />
2. ⼆进制流
如果返回的是图⽚的⼆进制流，那么需要在获取数据的是时候，处理⼀下数据格式，转成blob对象，再转成DataURL
const img = ateElement('img');
img.src = ateObjectURL(data);
3. base64
如果返回的是base64的数据格式，那么也是直接放在路径⾥就好了
const img = ateElement('img');
img.src = 'data:image/png;base64,' + data;
⼆、图⽚格式间的相互转换
但有些时候，我们不仅是要显⽰图⽚，还要将其转化为我们所需要的格式，以下介绍⼀些转化⽅法
1. 图⽚转base64
利⽤canvas的 toDataURL() ⽅法
getBase64Str(img) {
var canvas = ateElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = Context("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
var dataURL = DataURL("image/" + ext);
return dataURL;
}
2. base64转⼆进制
base64ToBlobArr(dataurl) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}svg canvas
return u8arr
}
3. ⼆进制转base64
blobToBase64(data) {
let img64 = btoa(new Uint8Array(data).reduce((data, byte) => data + String.fromCharCode(byte),'')) const src = "data:image/svg;base64,"+img64;
return src;
}
4. blob 转base64
blobToDataURI(blob) {
var reader = new FileReader();
callback(sult);
}
}
5. base64转blob
base64ToBlob(dataurl) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime
});
}
6. 总结
<div id="parent">
<img id="child" src ="gw.alipayobjects/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" onclick="test()" /> </div>
<script>
function getImg (src) {
const img = ateElement('img');
const parent = ElementById('parent');
img.src = src;
parent.appendChild(img);
}
function getBase64Str(img) {
var canvas = ateElement("canvas");
img.setAttribute("crossOrigin", 'Anonymous')
canvas.width = img.width;
canvas.height = img.height;
var ctx = Context("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
var dataURL = DataURL("image/" + ext);
return dataURL;
}
function base64ToBlobArr(dataurl) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return u8arr
}
function blobToBase64(data) {
let img64 = btoa(new Uint8Array(data).reduce((data, byte) => data + String.fromCharCode(byte),''))
const src = "data:image/svg;base64,"+img64;
return src;
}
function base64ToBlob(dataurl) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
const BlobObj = new Blob([u8arr], {
type: mime
});
return BlobObj;
}
function blobToDataURL(data) {
const src = ateObjectURL(data);
return src;
}
function blobToDataURIFn(blob, callback) {
var reader = new FileReader();
callback(sult);
}
}
function test() {
const img = ElementById('child');        let dataUrl = '';
/
/ 图⽚转base64转图⽚
const base64Str = getBase64Str(img);
dataUrl = base64Str;
getImg(dataUrl);
// base64转⼆进制,⼆进制转base64转图⽚
const blobObj = base64ToBlobArr(base64Str);        dataUrl = blobToBase64(blobObj);
getImg(dataUrl);
//base64转Blob转图⽚
let getBlobObj = base64ToBlob(base64Str);        dataUrl = blobToDataURL(getBlobObj);
console.log(imgSrc2);
getImg(dataUrl);
/
/ Blob转图⽚
blobToDataURIFn(getBlobObj, getImg);
}
</script>
参考链接：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。