【vue】canvas图片合成，图片格式转化，图片下载（PC和移动差别）

合成图片

通过canvas把多张图片合成一张图片

// 生命周期 mounted调用
createCanvasToImg(url){
	let canvas, context;
	// canvas 转 image
	let canvasToImg;
	// 海报背景
	let bgImage = new Image();
	bgImage.setAttribute("crossOrigin", "anonymous");  // 解决跨域 Canvas 污染问题
	bgImage.src = url+ '?time=' + Date.now();
	// 展馆头像
	let exhibitionImage = new Image();
	exhibitionImage.setAttribute("crossOrigin", "anonymous"); // 解决跨域 Canvas 污染问题
	exhibitionImage.src = this.$store.state.exhibitionMsg.thumb+ '?time=' + Date.now();
	
	// 生成二维码（二维码是使用插件直接在dom中生成，这里直接获取生成的二维码图片 ）
	// 插件名称 qrcode-vue3 [github传送门](https://github.com/scholtz/qrcode-vue3) 
	let qrCode = new Image();
	setTimeout(()=>{
		qrCode.src = document.querySelectorAll(".my-qur")[0].firstChild.currentSrc;
		// console.log("生成二维码", document.querySelectorAll(".my-qur")[0].firstChild.currentSrc)
	},100)
	
	canvas = document.createElement("canvas");
	context = canvas.getContext("2d");
	bgImage.onload = () =>{
		canvas.width = bgImage.width;
		canvas.height = bgImage.height;
		// 注入背景
		context.drawImage(bgImage, 0, 0, bgImage.width, bgImage.height);
		// 海报文本
		context.fillStyle = "#FFFFFF";
		context.font = "26px Arial";
		context.fillText("个人数字藏品展馆", 350, canvas.height - 110)
		context.fillText(this.$store.state.exhibitionMsg.exhibition_name, 350, canvas.height - 60)
		canvasToImg = canvas.toDataURL("image/png");
		this.posterImg = canvasToImg
	} 
	// 注入头像
	exhibitionImage.onload = () =>{
		context.drawImage(exhibitionImage, 193, canvas.height-152, 125, 125);
		canvasToImg = canvas.toDataURL("image/png");
		this.posterImg = canvasToImg
	}
	// 注入二维码
	qrCode.onload = () => {
		context.drawImage(qrCode, 55, canvas.height-152, 125, 125);
		// document.getElementById("mycanvas").append(canvas)
		canvasToImg = canvas.toDataURL("image/png");
		this.posterImg = canvasToImg
	
	}
}

图片格式转换

图片URL 转为 base64格式
使用图片预加载(我理解为先把图片缓存到本地)

getBase64Image(url){
	let image = new Image();
	// 解决跨域 Canvas 污染问题
	image.setAttribute("crossOrigin", "anonymous");
	image.src = url+ '?time=' + Date.now();
	image.onload = () => {
	let canvas = document.createElement("canvas");
	canvas.width = image.width;
	canvas.height = image.height;
	let context = canvas.getContext("2d");
	context.drawImage(image, 0, 0, image.width, image.height);
	let dataURL = canvas.toDataURL("image/png"); //得到图片的base64编码数据
	};
}

base64格式图片转换blob格式

// base64 转 blob
baseToBlob(baseData) {
  var arr = baseData.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格式图片转换为file格式

// blob转file
blobToFile(theBlob, fileName){
	// let files = new File([theBlob], fileName, {type: 'image/jpeg'})
	let files = new File([theBlob], fileName, {type: 'image/png'})
	theBlob.lastModifiedDate = new Date();
	theBlob.name = fileName;
	return files;
},

下载图片

通过超链接下载image base64

saveImg(imgbase) {
   var link = document.createElement('a');
   link.href = imgbase;
   link.download = "my_collect_share.png";
   link.click();
   this.openNotification("success", "下载提示","已下载")
 },

注意：移动端使用超链接无法下载base64

1. 可以把base64编码文件转成blob，再进行超链接下载

let url = 'base64的值';
// 下载文件
downloadFile(){
	var link = document.createElement('a');
	link.download = "my_collect_share.png"||'photo';
	link.href = window.URL.createObjectURL(this.baseToBlob(url),"my_collect_share.png");
	link.click();
}
// base64 转 blob
baseToBlob(baseData) {
  var arr = baseData.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 })
},

2. 可以把base64编码文件转成blob，再把blob转成file再进行超链接下载

/* 分为两步:
 * 1.base64转为blob对象，
 * 2.blob对象转为file对象
 */
let url = 'base64的值';
// 下载文件
downloadFile(){
	var link = document.createElement('a');
	link.download = "my_collect_share.png"||'photo';
	link.href = window.URL.createObjectURL(this.blobToFile(this.baseToBlob(url),"my_collect_share.png"));
	link.click();
}
// base64 转 blob
baseToBlob(baseData) {
  var arr = baseData.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转file
blobToFile(theBlob, fileName){
	// let files = new File([theBlob], fileName, {type: 'image/jpeg'})
	let files = new File([theBlob], fileName, {type: 'image/png'})
	theBlob.lastModifiedDate = new Date();
	theBlob.name = fileName;
	return files;
},