位置: IT常识 - 正文

vue 图片转base64格式的方法

编辑:rootadmin
vue 图片转base64格式的方法 require的方式

推荐整理分享vue 图片转base64格式的方法,希望有所帮助,仅作参考,欢迎阅读内容。

vue 图片转base64格式的方法

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

用vue引入图片的require方式获取的值可以直接生成base64格式,但是该方法只适用于5kb大小以下的图片

const path = require('@/assets/images/test.png')canvas.toDataURL()

该方法canvas.toDataURL(`image/${ext}`)传入的图片类型是什么生成后的base64数据前缀就是什么类型,如果传入的类型和生成的类型不同,则表示该方法不支持该类型的图片,例如gif图片转换后是png

imgUrlToBase64(url) { return new Promise((resolve, reject) => { if (!url) { reject('请传入url内容') } if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(url)) { // 图片地址 const image = new Image() // 设置跨域问题 image.setAttribute('crossOrigin', 'anonymous') // 图片地址 image.src = url image.onload = () => { const canvas = document.createElement('canvas') const ctx = canvas.getContext('2d') canvas.width = image.width canvas.height = image.height ctx.drawImage(image, 0, 0, image.width, image.height) // 获取图片后缀 const ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase() // 转base64 const dataUrl = canvas.toDataURL(`image/${ext}`) resolve(dataUrl || '') } } else { // 非图片地址 reject('非(png/jpe?g/gif/svg等)图片地址'); } }) },FileReader.readAsDataURL()getBase64(imgUrl) { return new Promise((resolve, reject) => { if (!imgUrl) { reject('请传入imgUrl内容') } if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(imgUrl)) { window.URL = window.URL || window.webkitURL var xhr = new XMLHttpRequest() xhr.open('get', imgUrl, true) xhr.responseType = 'blob' xhr.onload = function() { if (this.status == 200) { // 得到一个blob对象 var blob = this.response const oFileReader = new FileReader() oFileReader.onloadend = function(e) { const base64 = e.target.result resolve(base64 || '') } oFileReader.readAsDataURL(blob) } } xhr.send() } else { // 非图片地址 reject('非(png/jpe?g/gif/svg等)图片地址') } }) },
本文链接地址:https://www.jiuchutong.com/zhishi/295686.html 转载请保留说明!

上一篇:【HTML】HTML网页设计----动漫网站设计(html的网址)

下一篇:基于RuoYi框架自动生成后端代码及前端界面(ruoyi框架快速入门)

  • 软文推广在网站推广中起着重要作用(软文推广网站api)

    软文推广在网站推广中起着重要作用(软文推广网站api)

  • vivox70pro颜色有哪些(vivox70pro配色)

    vivox70pro颜色有哪些(vivox70pro配色)

  • iphone13面容解锁怎么直接进去(iphone13面容解锁戴口罩)

    iphone13面容解锁怎么直接进去(iphone13面容解锁戴口罩)

  • 小米手机时间不对怎么调(小米手机时间不对怎么校准)

    小米手机时间不对怎么调(小米手机时间不对怎么校准)

  • 怎么修改qq邮箱皮肤(怎么修改QQ邮箱发件人名称)

    怎么修改qq邮箱皮肤(怎么修改QQ邮箱发件人名称)

  • 网易云音乐怎么设置通知栏显示(网易云音乐怎么设置桌面歌词)

    网易云音乐怎么设置通知栏显示(网易云音乐怎么设置桌面歌词)

  • 快手怎么设置不让通讯录好友看到(快手怎么设置不让某一个人看作品)

    快手怎么设置不让通讯录好友看到(快手怎么设置不让某一个人看作品)

  • 苹果手机白点怎么设置(苹果手机白点怎么设置出来)

    苹果手机白点怎么设置(苹果手机白点怎么设置出来)

  • 别人加我QQ好友显示精确查找

    别人加我QQ好友显示精确查找

  • ed2k是什么文件(ed2k文件下载软件)

    ed2k是什么文件(ed2k文件下载软件)

  • inpods12蓝牙耳机用法(inpods12蓝牙耳机充电时红灯闪烁)

    inpods12蓝牙耳机用法(inpods12蓝牙耳机充电时红灯闪烁)

  • 小米手表怎么开机的方法(小米手表怎么开通虚拟卡)

    小米手表怎么开机的方法(小米手表怎么开通虚拟卡)

  • 手机qq如何查看最近联系人(手机qq如何查看共同好友)

    手机qq如何查看最近联系人(手机qq如何查看共同好友)

  • 什么是广角镜头,它的特点是什么(什么是广角镜头?简述广角镜头的成像特点)

    什么是广角镜头,它的特点是什么(什么是广角镜头?简述广角镜头的成像特点)

  • 小米8能用5a充电线充吗(小米8能用5a充电线吗)

    小米8能用5a充电线充吗(小米8能用5a充电线吗)

  • vivox5有没有呼吸灯(vivo呼吸灯在哪里设置)

    vivox5有没有呼吸灯(vivo呼吸灯在哪里设置)

  • vivo怎么设置外内存卡(vivo怎么设置外国号码打不进来)

    vivo怎么设置外内存卡(vivo怎么设置外国号码打不进来)

  • 手机无法截屏怎么办(手机无法截屏怎么办视频)

    手机无法截屏怎么办(手机无法截屏怎么办视频)

  • iphone11夜拍模式怎么开(iphone11夜拍功能)

    iphone11夜拍模式怎么开(iphone11夜拍功能)

  • 苹果xs发烫是咋回事(苹果xs发热烫手)

    苹果xs发烫是咋回事(苹果xs发热烫手)

  • 抖音爱心变脸怎么拍(抖音里变脸)

    抖音爱心变脸怎么拍(抖音里变脸)

  • 解决在vue3中使用reactive响应式,赋值后造成页面不改变的问题?(vue3 $bus)

    解决在vue3中使用reactive响应式,赋值后造成页面不改变的问题?(vue3 $bus)

  • python的概率分布有哪些类型?(python 概率分布函数)

    python的概率分布有哪些类型?(python 概率分布函数)

  • 认缴制股权转让印花税的计税依据是什么
  • 缴纳附加税会计科目怎么做
  • 天然气管道维修收费标准
  • 运输开票的税点是多少
  • 小规模纳税人外账处理
  • 申报财务报表时应收和预收可以合并
  • 缴纳销项税额要交税吗
  • 公司打印银行回单和对账单
  • 收取不合规发票怎么处理
  • 库存现金限额的概念
  • 票货分离怎么处理
  • 关税如何征收
  • 长期挂账应付款的审计
  • 收到发票错误主管有责任吗
  • 无形资产除了专利还有什么
  • 股票持有多久可以打新股
  • 旅行社小规模纳税人增值税怎么征税
  • 银行转贴现业务违法吗
  • 取得拍卖的固定资产
  • 利润表其他综合收益的税后净额怎么算
  • 借款支付工程款合法吗
  • 汽车维修发票是几个点
  • 单位缴纳工会经费的会计分录怎么做
  • 购买商城购买化肥
  • php技术基础知识
  • 银行退回手续费的账务处理
  • 在php中,字符串有哪些表示形式
  • 残疾人增值税即征即退政策2020
  • 计提减值后折旧年限怎么算
  • 房地产开发企业土地增值税怎么计算
  • 商业企业营业收入
  • 代理业务资产的含义
  • devtools安装mac
  • 所得税季报资产总额怎么算
  • 公司转让账务处理方法
  • Win11 Build 25336 预览版发布:Snap 窗口新增最近 20 个标签选项
  • 微信小程序开发公司
  • 出售自建不动产怎么交税
  • 政府奖励需要缴纳增值税吗
  • 加计扣除内容
  • 人力资源外包服务企业
  • 资产负债表中应收账款的计算公式
  • 小规模纳税人与一般纳税人的区别表现在小规模纳税人
  • 盘盈盘亏怎么填写
  • 厂家给经销商的补贴怎么开票
  • 银行三证合一是哪三证
  • 残保金的税收优惠政策
  • 分配股利有几种形式
  • 实发工资有小数点是如何解决的
  • 销售返利是否需要交税
  • 固定资产折旧计入什么费用
  • 应付利润科目
  • 集装箱发票是否要在备注栏注明地址
  • 贷内部往来
  • 财务报表项目认定有哪些
  • 复式记账法主要有
  • 日记账的标准格式是
  • 在SQL Server 2005中,数据库文件的扩展名为
  • Win2008 Server Core如何操作?5个步骤学会Win2008 Server Core操作
  • win7系统步骤
  • win7系统IE浏览器版本
  • 查看linux系统版本信息
  • xp双系统怎么切换系统
  • win10 u盘写保护
  • win7 设置
  • win7系统搜索功能没了
  • opengl learning中文
  • js中attribute
  • 老生常谈的近义词
  • jquery日程安排
  • node.js快速入门
  • unity增加组件
  • js获取对象key的方式有哪些
  • 用js实现导航栏的下拉列表
  • 举例讲解生产可能性曲线
  • jQuery ajax方法传递中文时出现中文乱码的解决方法
  • jquery datatable排序
  • 安置房公摊面积多少属于正常范围
  • 税务登记表格怎么填写
  • 跨市变更税务登记要多久
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设