移动端js下载图片

最新推荐文章于 2024-04-16 09:45:00 发布

你瞅啥灬

最新推荐文章于 2024-04-16 09:45:00 发布

阅读量2.2k

点赞数 3

分类专栏： js 下载图片到相册文章标签： html5 javascript html

本文链接：https://blog.csdn.net/weixin_53458907/article/details/120173436

版权

js 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

下载图片到相册

1 篇文章 1 订阅

订阅专栏

这段代码展示了如何通过HTML的canvas元素和JavaScript来下载图片。首先，将base64编码的图片数据设置到img标签中，然后创建一个div元素用于触发图片下载。当点击该div时，会创建一个隐藏的a标签，将canvas转换为PNG格式的dataURL作为href属性，最后模拟点击a标签来触发图片下载。

摘要由CSDN通过智能技术生成

// 利用canvas
 <img :src="'data:image/jpeg;base64,'+ imgurl " id="ewm"> // imgurl为base64格式
 <div @click="downImg('ewm')"></div>
 
 // js
 downImg(id){
      let imgObj=document.getElementById(id);
      imgObj.crossOrigin='anonymous'
      this.funDownload(imgObj,'下载图片名字');
  },
  //下载图片的方法
    funDownload(domImg, filename) {
    // 创建隐藏的可下载链接
    let eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';
    // 图片转base64地址
    let canvas = document.createElement('canvas');
    canvas.width = 600;
    canvas.height = 850;
    let context = canvas.getContext('2d');
    let width = domImg.naturalWidth;
    let height = domImg.naturalHeight;
    context.drawImage(domImg, 0, 0,width,height);
    // 如果是PNG图片，则canvas.toDataURL('image/png')
    eleLink.href = canvas.toDataURL('image/png');
    // 触发点击
    document.body.appendChild(eleLink);
    eleLink.click();
    // 然后移除
    document.body.removeChild(eleLink);
},