下载blob链接图片
时间: 2023-06-30 18:22:13 浏览: 62
要下载blob链接图片,可以按照以下步骤进行:
1. 首先,使用JavaScript创建一个XMLHttpRequest对象,或者使用fetch API发送一个HTTP GET请求,获取blob链接。
2. 在回调函数中,将获取到的blob链接对象转换为URL对象,使用URL.createObjectURL()方法将其转换为可用的URL。
3. 通过创建一个新的Image对象,并将其src属性设置为前一步中创建的URL,来加载图片。
4. 最后,将图片下载到本地,可以使用HTML5中的download属性或者创建一个链接,然后设置其href属性为图片URL,使用JavaScript模拟点击该链接来实现下载。
以下是一个示例代码:
```javascript
const xhr = new XMLHttpRequest();
xhr.open('GET', 'blob_url_here');
xhr.responseType = 'blob';
xhr.onload = () => {
const imgSrc = URL.createObjectURL(xhr.response);
const img = new Image();
img.src = imgSrc;
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
canvas.getContext('2d').drawImage(img, 0, 0);
const link = document.createElement('a');
link.href = canvas.toDataURL('image/png');
link.download = 'image.png';
link.click();
}
};
xhr.send();
```