该代码段展示了一个函数getUrlBase64,它利用HTML5的Canvas和Promise将图片URL转换为Base64编码。当图片加载完成后,将其绘制到canvas上,然后转换为dataURL。另一个函数download_qr_code在接收到Base64编码后,创建一个链接元素用于下载名为qrCode.png的图片。
//图片编码
const getUrlBase64 = (url) => {return new Promise((resolve) => {let canvas = document.createElement("canvas");let ctx = canvas.getContext("2d");let img = new Image();img.crossOrigin = "Anonymous"; //允许跨域img.src = url;img.onload = function () {canvas.height = 300;canvas.width = 300;ctx.drawImage(img, 0, 0, 300, 300);let dataURL = canvas.toDataURL("image/png");canvas = null;resolve(dataURL);};});
};// click事件调用方法
const download_qr_code = (item) => {getUrlBase64(item).then((base64) => {let link = document.createElement("a");link.href = base64;link.download = "qrCode.png";link.click();});
};