介绍 & lt; a href=https://www.yisu.com/zixun/@click“#”。防止=" downloadIamge (imgsrc、名称)"> {{名称}} downloadIamge (imgsrc,名称),{
,,,,,const url =imgsrc
,,,,,this.convertUrlToBase64 (url) ((base64),=祝辞,{
,,,,,,,const blob =, this.convertBase64UrlToBlob (base64)
,,,,,,,if (getBrowser(),===, & # 39;即# 39;,| |,getBrowser(),===, & # 39;边缘# 39;),{
,,,,,,,,,window.navigator.msSaveBlob (blob,名称)
,,,,,,,},{else
,,,,,,,,,const a =, document.createElement(& # 39;一个# 39;)
,,,,,,,,,const body =, document.querySelector(& # 39;身体# 39;)
,,,,,,,,,a.download =, name | |, & # 39;图像# 39;
,,,,,,,,,a.href =, URL.createObjectURL (blob)
,,,,,,,,,a.style.display =, & # 39;没有# 39;
,,,,,,,,,body.appendChild (a)
,,,,,,,,,a.click ()
,,,,,,,,,body.removeChild (a)
,,,,,,,,,window.URL.revokeObjectURL (a.href)
,,,,,,,}
,,,,,})
,,,}, convertUrlToBase64 (url), {
,,,,,return new 承诺((解决,,拒绝),=祝辞,{
,,,,,,,const img =, new 图像()
,,,,,,,img.crossOrigin =, & # 39;匿名# 39;
,,,,,,,img.src =, url
,,,,,,,img.onload =, function (), {
,,,,,,,,,const canvas =, document.createElement(& # 39;帆布# 39;)
,,,,,,,,,canvas.width =img.width
,,,,,,,,,canvas.height =img.height
,,,,,,,,,const ctx =, canvas.getContext (& # 39; 2 d # 39;)
,,,,,,,,,ctx.drawImage (img, 0, 0,, img.width,, img.height)
,,,,,,,,,const ext =, img.src.substring (img.src.lastIndexOf(& # 39; # 39;公司),+,1).toLowerCase ()
,,,,,,,,,const dataURL =, canvas.toDataURL(& # 39;图像/& # 39;,+,ext)
,,,,,,,,,const base64 =, {
,,,,,,,,,,,dataURL:, dataURL,
,,,,,,,,,,,类型:,& # 39;图像/& # 39;,+,ext,
,,,,,,,,,,,ext: ext
,,,,,,,,,}
,,,,,,,,,解决(base64)
,,,,,,,}
,,,,,})
,,,}, convertBase64UrlToBlob (base64), {
,,,,,const parts =, base64.dataURL.split (& # 39; base64, & # 39;)
,,,,,const contentType [0]=,部分.split (& # 39;: & # 39;) [1]
,,,,,const raw =, window.atob[1](部分)
,,,,,const rawLength =raw.length
,,,,,const uInt8Array =, new Uint8Array (rawLength)
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
小编给大家分享一下如何利用帆布实现图片下载功能来实现浏览器兼容问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
前言:项目中需要实现图片下载功能,第一个想到的是使用的标签的下载属性来实现,但是在不同浏览器下测试会发现,有的浏览器无效,点击后直接预览图片,所以,上网找到了另外一种兼容不同浏览器的图片下载的方法,那就是利用帆布来处理图片,实现下载;
1。项目中点击事件绑定:
2。点击事件中操作:
3. this.converturltobase64 (url)就是利用帆布和toDataURL把图片转成base64格式并返回
其中:img。crossOrigin=& # 39;匿名# 39;是前端对图片的跨域处理;
4. this.convertbase64urltoblob (base64)是将图片base64流文件转成blob文件
