两种图片下载方式：点击下载（常用于pc端）、长按下载（h5端更适合）
一、点击下载
步骤记录：
1、用户点击下载按钮
2、使用canvas将页面获取的远程图片转换为base64格式
3、动态创建一个a标签并将转换后的图片赋值给a标签的src
4、触发a标签的并下载
以下是js代码：
````
imgToBase64(imgSrc,imgName){
var image = new Image()
// 解决跨域 Canvas 污染问题
image.setAttribute('crossOrigin', 'anonymous')
image.onload = function () {
var canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
var context = canvas.getContext('2d')
context.drawImage(image, 0, 0, image.width, image.height)
var url = canvas.toDataURL('image/png')
// 生成一个a元素
var a = document.createElement('a')
// 创建一个单击事件
var event = new MouseEvent('click')
// 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
a.download = imgName|| '下载图片名称'
// 将生成的URL设置为a.href属性
a.href = url
// 触发a的单击事件
a.dispatchEvent(event)
}
image.src = imgSrc;
}
````
二、长按下载
步骤记录：
1、先使用canvas将页面获取的远程图片转换为base64格式
2、将转换后的base64图片赋值到img标签上显示
3、长按图片会弹出功能菜单，选择下载即可
以下是js代码：
````
imgToBase64(imgSrc,imgEl){
var image = new Image()
// 解决跨域 Canvas 污染问题
image.setAttribute('crossOrigin', 'anonymous')
image.onload = function () {
var canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
var context = canvas.getContext('2d')
context.drawImage(image, 0, 0, image.width, image.height)
var url = canvas.toDataURL('image/png')
imgEl.src=url;
}
image.src = imgSrc;
}
````
h5跨域图片下载经测试在android的微信、uc浏览器、app内嵌网页以及ios12的微信、safari浏览器上都可以完美下载图片
网友评论