请用js 使用url下载图片
时间: 2023-12-03 19:03:28 浏览: 30
好的,以下是使用 JavaScript 通过 URL 下载图片的示例代码:
```
function downloadImage(url) {
let img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function() {
let canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
let ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
let link = document.createElement('a');
link.href = canvas.toDataURL();
link.download = 'image.png';
link.click();
};
img.src = url;
}
```
你只需要调用 `downloadImage(url)`,将需要下载的图片 URL 作为参数传入即可。这个函数会自动创建一个新的 `canvas` 元素,将图片绘制到上面,并转换为 `data URL`,最后创建一个下载链接,用户点击后即可下载图片。
希望对你有所帮助!
相关问题
vue使用url下载图片
可以使用以下代码:
```javascript
function downloadImage(imageUrl) {
// 创建一个a标签,指定下载文件的url和文件名
const a = document.createElement('a')
a.href = imageUrl
a.download = 'fileName' // 可以自定义文件名,也可以根据实际情况获取图片名称
// 将a标签添加到页面上,模拟点击实现下载
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
}
```
使用时,调用`downloadImage`函数并传入图片的url即可实现下载。注意,下载远程图片需要跨域支持。如果是本地图片,则不存在跨域问题。
使用vue 根据图片url下载阿里云跨域图片到浏览器 并且修改文件名
要下载阿里云跨域图片并修改文件名,可以使用以下步骤:
1. 在Vue组件中创建一个方法,用于处理下载图片的逻辑。方法的参数应该包含图片的URL和新文件名。
```javascript
downloadImage(url, filename) {
// 处理下载逻辑
}
```
2. 创建一个新的Image对象,将其src属性设置为要下载的图片URL。这样可以在后台预加载图片,以确保下载进度的实时更新。
```javascript
let img = new Image();
img.src = url;
```
3. 为Image对象添加load事件监听器,以便在图片加载完成后执行下载逻辑。
```javascript
img.onload = () => {
// 执行下载逻辑
}
```
4. 在load事件处理程序中,使用canvas将图片绘制到画布上,并使用toBlob方法将画布转换为Blob对象。
```javascript
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
ctx.drawImage(img, 0, 0);
canvas.toBlob((blob) => {
// 执行下载逻辑
}, 'image/jpeg', 0.9);
```
5. 使用XMLHttpRequest对象将Blob对象发送到服务器,并将其保存为新文件。
```javascript
let xhr = new XMLHttpRequest();
xhr.open('POST', '/server/saveImage.php', true);
xhr.setRequestHeader('Content-Type', 'application/octet-stream');
xhr.setRequestHeader('Content-Disposition', 'attachment; filename=' + filename);
xhr.send(blob);
```
完整代码示例:
```javascript
downloadImage(url, filename) {
let img = new Image();
img.src = url;
img.onload = () => {
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
ctx.drawImage(img, 0, 0);
canvas.toBlob((blob) => {
let xhr = new XMLHttpRequest();
xhr.open('POST', '/server/saveImage.php', true);
xhr.setRequestHeader('Content-Type', 'application/octet-stream');
xhr.setRequestHeader('Content-Disposition', 'attachment; filename=' + filename);
xhr.send(blob);
}, 'image/jpeg', 0.9);
}
}
```
需要注意的是,在下载跨域图片时,需要在服务器端设置允许跨域访问。可以在服务器端设置Access-Control-Allow-Origin头,允许访问的域名列表。
相关推荐
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)