js+html下载图片到本地（canvas）

最新推荐文章于 2024-04-14 12:13:08 发布

乌索普-

最新推荐文章于 2024-04-14 12:13:08 发布

阅读量894

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_47000135/article/details/119003811

版权

js 同时被 2 个专栏收录

34 篇文章 4 订阅

订阅专栏

功能片段

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述

思路：要下载图片，首先要知道图片的路径，拿到图片后放在画布上，所以需要创建画布
即：1.获取图片、拿到url
2.创建画布
3.创建a标签加点击事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片下载</title>
</head>

<body>
  <a download="画画的女孩">
    <img id="img" src="https://img2.baidu.com/it/u=2652156966,1048951106&fm=26&fmt=auto&gp=0.jpg" width="400px"
      height="400px">
  </a>

  <button id="btn">点击下载图片</button>
</body>
<script>
  let btn = document.getElementById('btn')
  btn.onclick = () => {
    let img = document.getElementById('img')
    console.log('img', img);
    const downUrl = img.src //获取图片的路径
    img.crossOrigin = 'anonymous'
    img.onload = function () {
      let canvas = document.createElement('canvas') //创建canvas
      canvas.width = img.width
      canvas.height = img.height
      let context = canvas.getContext('2d') //getContext() 方法返回一个用于在画布上绘图的环境
      context.drawImage(img, 10, 10, img.width, img.height) //drawImage() 方法在画布上绘制图像、画布或视频
      let url = canvas.toDataURL('image/png') //方法返回一个包含图片展示的 data URI base64。
      let a = document.createElement('a')
      a.download = '画画的女孩'
      a.href = url
      let event = new MouseEvent('click') //创建鼠标单击事件

      a.dispatchEvent(event) //触发自定义单击事件
    }
    img.src = downUrl
  }

</script>

</html>

要记得加img.crossOrigin = ‘anonymous’，处理跨域 Canvas 污染问题，crossorigin 是中新增的标签属性

乌索普-

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js+html下载图片到本地（canvas）

思路：要下载图片，首先要知道图片的路径，拿到图片后放在画布上，所以需要创建画布即：1.获取图片、拿到url2.创建画布3.创建a标签加点击事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"..
复制链接

扫一扫