利用canvas实现图片下载功能来实现浏览器兼容问题


Posted in HTML / CSS onMay 31, 2019

前言:项目中需要实现图片下载功能,第一个想到的是使用a标签的download属性来实现,但是在不同浏览器下测试会发现,有的浏览器无效,点击后直接预览图片,所以,上网找到了另外一种兼容不同浏览器的图片下载的方法,那就是利用canvas来处理图片,实现下载;

1.项目中点击事件绑定:

<a href="#" @click.prevent="downloadIamge(imgsrc, name)"><span>{{name}}</span></a>

2.点击事件中操作:

downloadIamge (imgsrc, name) {
      const url = imgsrc
      this.convertUrlToBase64(url).then((base64) => {
        const blob = this.convertBase64UrlToBlob(base64)
        if (getBrowser() === 'IE' || getBrowser() === 'Edge') {
          window.navigator.msSaveBlob(blob, name)
        } else {
          const a = document.createElement('a')
          const body = document.querySelector('body')
          a.download = name || 'image'
          a.href = URL.createObjectURL(blob)
          a.style.display = 'none'
          body.appendChild(a)
          a.click()
          body.removeChild(a)
          window.URL.revokeObjectURL(a.href)
        }
      })
    },

3.this.convertUrlToBase64(url)就是利用canvas和toDataURL把图片转成base64格式并返回

convertUrlToBase64 (url) {
      return new Promise((resolve, reject) => {
        const img = new Image()
        img.crossOrigin = 'Anonymous'
        img.src = url
        img.onload = function () {
          const canvas = document.createElement('canvas')
          canvas.width = img.width
          canvas.height = img.height
          const ctx = canvas.getContext('2d')
          ctx.drawImage(img, 0, 0, img.width, img.height)
          const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
          const dataURL = canvas.toDataURL('image/' + ext)
          const base64 = {
            dataURL: dataURL,
            type: 'image/' + ext,
            ext: ext
          }
          resolve(base64)
        }
      })
    },

其中:img.crossOrigin = 'Anonymous'是前端对图片的跨域处理;

4.this.convertBase64UrlToBlob(base64)是将图片base64流文件转成blob文件

convertBase64UrlToBlob (base64) {
      const parts = base64.dataURL.split('base64,')
      const contentType = parts[0].split(':')[1]
      const raw = window.atob(parts[1])
      const rawLength = raw.length
      const uInt8Array = new Uint8Array(rawLength)
      for (let i = 0; i < rawLength; i++) {
        uInt8Array[i] = raw.charCodeAt(i)
      }
      return new Blob([uInt8Array], { type: contentType })
    },

5.getBrowser()用来判断浏览器,解决浏览器兼容性问题:

import { getBrowser } from '@/utils/utils'
export function getBrowser () {
  const userAgent = navigator.userAgent
  if (userAgent.indexOf('OPR') > -1) {
    return 'Opera'
  }
  if (userAgent.indexOf('Firefox') > -1) {
    return 'FF'
  }
  if (userAgent.indexOf('Trident') > -1) {
    return 'IE'
  }
  if (userAgent.indexOf('Edge') > -1) {
    return 'Edge'
  }
  if (userAgent.indexOf('Chrome') > -1) {
    return 'Chrome'
  }
  if (userAgent.indexOf('Safari') > -1) {
    return 'Safari'
  }
}

6.如果是IE或者Edge浏览器,可以直接使用window.navigator.msSaveBlob(blob, name)完成下载;

声明:由于ios系统有安全性限制,以上方法在ios上无效;

以上就是记录项目中用到的图片下载,浏览器兼容的问题,涉及到的base64和blob的知识点和原理还不是很清晰,有时间一定要研究一下,整个方法,亲测有效;欢迎测用,与意见反馈。也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3轻松实现清新 Loading 效果的简单实例
Jun 06 HTML / CSS
css3的transition效果和transfor效果示例介绍
Oct 30 HTML / CSS
CSS3 Media Queries详细介绍和使用实例
May 08 HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 HTML / CSS
全方位了解CSS3的Regions扩展
Aug 07 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
Jan 31 HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
浅析图片上传及canvas压缩的流程
Jun 10 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 HTML / CSS
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
Aug 23 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
Jun 03 #HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 #HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 #HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 #HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 #HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
Jul 10 #HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
Jul 11 #HTML / CSS
You might like
PHP与javascript实现变量交互的示例代码
2013/07/23 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
Python 深入理解yield
2008/09/06 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
python 批量将中文名转换为拼音
2021/02/07 Python
美国网上书店:Barnes & Noble
2018/08/15 全球购物
土木工程实习生自我鉴定
2013/09/19 职场文书
出生医学证明样本
2014/01/17 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
捐助倡议书范文
2014/04/15 职场文书
小学二年级评语
2014/04/21 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
销售经理岗位职责
2015/01/31 职场文书