handleDownload(row) { const { id, pictureurllist } = row if (pictureurllist && pictureurllist[0]) { const { fileservicepath, filesuffix, title } = pictureurllist[0] const isImg = ['jpg', 'jpeg', 'png'].includes(filesuffix) console.log(isImg) if (isImg) { this.downloadIamge(fileservicepath, title) } else { window.open(fileservicepath) } } }, downloadIamge(imgsrc, name) { let image = new Image() // 解决跨域 Canvas 污染问题 image.setAttribute('crossOrigin', 'anonymous') image.onload = function () { let canvas = document.createElement('canvas') canvas.width = image.width canvas.height = image.height let context = canvas.getContext('2d') context.drawImage(image, 0, 0, image.width, image.height) let url = canvas.toDataURL('image/png') //得到图片的base64编码数据 let a = document.createElement('a') // 生成一个a元素 let event = new MouseEvent('click') // 创建一个单击事件 a.download = name || 'photo' // 设置图片名称 a.href = url // 将生成的URL设置为a.href属性 a.dispatchEvent(event) // 触发a的单击事件 } image.src = imgsrc }
前端实现访问img地址直接下载
原创
©著作权归作者所有:来自51CTO博客作者蓝色海岛的原创作品,请联系作者获取转载授权,否则将追究法律责任
上一篇:vue插槽
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
一个图片 url 访问后直接下载怎样实现?
一个图片 url 访问后直接下载怎样实现?
javascript html5 前端 URL 网络协议 -
直接下载mongodb版本
mongodb
mongodb 版本