一.图片转base64(可以是绝对路径也可以是相对路径)
注意:使用相对路径图片会有跨域，利用vscode的live Server打开则不会有问题
参考链接:https://www.jb51.net/article/138809.htm
演示代码如下：（使用canvas生成base64，去掉jq，使用promise）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片转base64,再base64转Blob对象，再Blob转url实例</title>
</head>
<body>
<div>
<p>1.new image对象后赋值url</p>
<p id="container2"></p>
</div>
<div>
<p>2.canvas画出来的图片</p>
<canvas class="nimg"></canvas>
</div>
<div>
<p>3.base64地址的图片</p>
<img class="base64Url" src="" alt="">
</div>
<div>
<p>4.blob对象转临时url地址的图片</p>
<img class="blobUrl" src="" alt="">
</div>
<script>
let imgSrc = "https://cdn.shopify.com/s/files/1/0016/7755/7826/files/tops.jpg?5"; //绝对路径图片
// let imgSrc = "picture/sunflower.jpg"; //相对路径图片
var base64Data="";
//------------------------------------- 图片转base64的函数 -----------------------------------------------------------
//width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
function getBase64Image(img, width, height) {
var canvas = document.createElement("canvas");
canvas.width = width ? width : img.width;
canvas.height = height ? height : img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
var dataURL = canvas.toDataURL();
return dataURL;
}
function getCanvasBase64(img) {
return new Promise((resolve,reject)=>{
var image = new Image();
//至关重要
image.crossOrigin = '';
image.src = img;
if (img) {
image.onload = function () {
resolve(getBase64Image(image)); //将想要的结果resolve出来
document.getElementById("container2").appendChild(image); //方便查看引入地址图片是否有问题
}
}
})
}
//------------------------------------- base64转blob对象函数 -------------------------------------------------------
function dataURItoBlob(base64Data) {
var byteString;
if(base64Data.split(',')[0].indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')[1]);//base64 解码
else{
byteString = unescape(base64Data.split(',')[1]);
}
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];//mime类型 -- image/png
// var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
// var ia = new Uint8Array(arrayBuffer);//创建视图
var ia = new Uint8Array(byteString.length);//创建视图
for(var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
var blob = new Blob([ia], {
type: mimeString
});
return blob;
}
//----------------------------------- 最终目的 ----------------------------------------------------------------------------
getCanvasBase64(imgSrc) //promise函数的调用，十分方便控制结果
.then((base64)=> {
console.log("方式二》》》》》》》》》",base64); //base64转化结果
document.getElementsByClassName("base64Url")[0].src = base64;
console.log('base64转blob',dataURItoBlob(base64)); //调用转化为blob的函数，将base64转化为blob对象
console.log('blob转url',window.URL.createObjectURL(dataURItoBlob(base64))); //blob对象再转临时url
document.getElementsByClassName('blobUrl')[0].src = window.URL.createObjectURL(dataURItoBlob(base64));
var nimg = new Image();
nimg.onload = function(){
document.getElementsByClassName('nimg')[0].width=nimg.width;
document.getElementsByClassName('nimg')[0].height=nimg.height;
document.getElementsByClassName('nimg')[0].getContext("2d").drawImage(nimg,0,0);
};
nimg.src = base64;
}).catch((err)=> {
console.log(err);
});
</script>
</body>
</html>
二.小结
参考链接:https://blog.csdn.net/p312011150/article/details/78930418
IMG_20191113_112033.jpg
代码：
函数都比较简单，直接看就ok了
/*-----------------------------------------------------------------------*/
// canvas转dataURL：canvas对象、转换格式、图像品质
function canvasToDataURL(canvas, format, quality){
return canvas.toDataURL(format||'image/jpeg', quality||1.0);
}
// DataURL转canvas
function dataURLToCanvas(dataurl, cb){
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
cb(canvas);
};
img.src = dataurl;
}
/*-----------------------------------------------------------------------*/
// image转canvas：图片地址
function imageToCanvas(src, cb){
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = src;
img.onload = function (){
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
cb(canvas);
};
}
// canvas转image
function canvasToImage(canvas){
var img = new Image();
img.src = canvas.toDataURL('image/jpeg', 1.0);
return img;
}
/*-----------------------------------------------------------------------*/
// File/Blob对象转DataURL
function fileOrBlobToDataURL(obj, cb){
var a = new FileReader();
a.readAsDataURL(obj);
a.onload = function (e){
cb(e.target.result);
};
}
// DataURL转Blob对象
function dataURLToBlob(dataurl){
var arr = dataurl.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}
/*-----------------------------------------------------------------------*/
// Blob转image
function blobToImage(blob, cb){
fileOrBlobToDataURL(blob, function (dataurl){
var img = new Image();
img.src = dataurl;
cb(img);
});
}
// image转Blob
function imageToBlob(src, cb){
imageToCanvas(src, function (canvas){
cb(dataURLToBlob(canvasToDataURL(canvas)));
});
}
/*-----------------------------------------------------------------------*/
// Blob转canvas
function BlobToCanvas(blob, cb){
fileOrBlobToDataURL(blob, function (dataurl){
dataURLToCanvas(dataurl, cb);
});
}
// canvas转Blob
function canvasToBlob(canvas, cb){
cb(dataURLToBlob(canvasToDataURL(canvas)));
}
/*-----------------------------------------------------------------------*/
// image转dataURL
function imageToDataURL(src, cb){
imageToCanvas(src, function (canvas){
cb(canvasToDataURL(canvas));
});
}
// dataURL转image，这个不需要转，直接给了src就能用
function dataURLToImage(dataurl){
var img = new Image();
img.src = d;
return img;
}
注：个人学习，引用不少代码，若有错误，请指正
网友评论