js图片下载(支持跨域/解决Access-Control-Allow-Origin)

一、思路

• 使用canvas绘制图片
• 使用toBlob方法将canvas图片转换为文件
• 使用a标签的download属性下载这个canvas转化生成的图片文件

canvas.toBlob()

• 将canvas图像转换为文件
• 参数一为可操作的blob对象构成的的回调函数
• 参数二为生成的图片后缀名，默认为png
• 参数三为生成图片的质量，比如0.9

二、源码

const imageDownload = src = {
  let canvas = document.createElement('canvas')
  let img = document.createElement('img')
  img.onload = () => {
    canvas.width = img.width
    canvas.height = img.height
    let context = canvas.getContext('2d')
    context.drawImage(img, 0, 0, img.width, img.height)
    canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height)
    canvas.toBlob(blob => {
      let link = document.createElement('a')
      link.href = window.URL.createObjectURL(blob)
      link.download = 'download' // resource name
      link.click()
    }, "/*可指定图片格式*/", "0.95")
  }
  img.setAttribute("crossOrigin", 'Anonymous')
  img.src = src
}

三、使用方法

直接传入图片链接即可，支持本地图片以及网络图片(需设置过支持跨域访问)链接。

1.测试图片地址:

来一句废话。复制上边的工具函数到chrome控制台执行，再复制下面这一句代码执行，你会发现图片被下载到本地了（使用的某网站的图片链接，如果失效麻烦给我留言）

imageDownload('https://cdn.segmentfault.com/v-5e154194/global/img/user-64.png')

2.再次确认

需要用到你本地/内网图片地址做下测试，比如172.168.0.91:8080/app/imgs/avatar.png

如果你看到如下的错误，说明你的服务端缺少了允许跨域访问的配置。

Access to image at '172.168.0.91:8080/app/imgs/avatar.png' from origin 'https://segmentfault.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

四、server端配置示例

以nginx配置为例,修改nginx\conf\nginx.conf文件，在对应转发的端口号配置下加如下代码

    add_header Access-Control-Allow-Origin *;
	add_header Access-Control-Allow-Headers X-Requested-With;
	add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

示例配置

server {
    listen       8082;
   
	server_name localhost;
	
	add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
	add_header Access-Control-Allow-Origin *;
	add_header Access-Control-Allow-Headers X-Requested-With;
	add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}

emm，配置完成，亲测有效。哪位小伙伴还有问题可以为我留言

END