项目中遇见后端返回了图片的地址,前段需要将图片保存到本地;
解决办法:
先用图片地址和图片名称生成blob对象,再使用a标签下载
这里写成了一个方法,传入图片链接和图片名称就好了
//根据url和名称生成blob
downloadPic(url, name) {
let image = new Image();
image.setAttribute("crossOrigin", "anonymous");
image.src = url;
image.onload = () => {
let canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
let ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, image.width, image.height);
canvas.toBlob((blob) => {
let url = URL.createObjectURL(blob);
let Link = document.createElement("a");
Link.download = name;
Link.href = href;
Link.click();
Link.remove();
// 用完释放URL对象
URL.revokeObjectURL(url);
});
};
},