js图片下载

 

 

var url = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=743446847,1016653021&fm=27&gp=0.jpg'
// 将链接地址字符内容转变成blob地址
fetch(url).then(res => res.blob()).then(blob => { 
// 创建隐藏的可下载链接   
var a = document.createElement('a');
a.style.display = 'none';
a.href = URL.createObjectURL(blob);       
a.download = 'QRcode.jpg';
document.body.appendChild(a);
a.click();
//移除元素
document.body.removeChild(a);
});

 

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
要实现js图片打包下载,可以使用canvas和FileSaver.js库。步骤如下: 1. 创建一个空的canvas元素,设置宽高等属性。 2. 在canvas上绘制图片,使用drawImage()方法。 3. 将canvas转换为DataURL数据,使用toDataURL()方法。 4. 将DataURL数据转换为Blob对象,使用dataURItoBlob()方法。 5. 使用FileSaver.js库将Blob对象保存为图片文件。 下面是一个示例代码: ```javascript // 引入FileSaver.js库 import { saveAs } from 'file-saver'; // 创建一个canvas元素 const canvas = document.createElement('canvas'); canvas.width = 800; canvas.height = 600; const ctx = canvas.getContext('2d'); // 加载图片 const img = new Image(); img.onload = function() { // 在canvas上绘制图片 ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // 将canvas转换为DataURL数据 const dataUrl = canvas.toDataURL('image/png'); // 将DataURL数据转换为Blob对象 const blob = dataURItoBlob(dataUrl); // 使用FileSaver.js库将Blob对象保存为图片文件 saveAs(blob, 'image.png'); }; img.src = 'path/to/image.png'; // 将DataURL数据转换为Blob对象的方法 function dataURItoBlob(dataURI) { const byteString = atob(dataURI.split(',')[1]); const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; const ab = new ArrayBuffer(byteString.length); const ia = new Uint8Array(ab); for (let i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ab], { type: mimeString }); } ``` 在上面的代码中,需要先引入FileSaver.js库,然后创建一个canvas元素并设置宽高等属性。接着加载要打包下载图片,使用drawImage()方法将图片绘制到canvas上,然后将canvas转换为DataURL数据,再将其转换为Blob对象,最后使用FileSaver.js库将Blob对象保存为图片文件。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值