前端如何把图片url地址https://url转成base64

前端如何把图片url地址https://url转成base64

一、直接上代码

javascript 复制代码
async getImgImg() {
  let url = await this.base64(this.From.imageData)
},
base64(url) {
 return new Promise(resolve => {
     const image = new Image()
     // 先设置图片跨域属性
     image.crossOrigin = 'Anonymous'
     // 再给image赋值src属性,先后顺序不能颠倒
     image.src = url
     image.onload = function () {
         const canvas = document.createElement('CANVAS')
         // 设置canvas宽高等于图片实际宽高
         canvas.width = image.width
         canvas.height = image.height
         canvas.getContext('2d').drawImage(image, 0, 0)
         // toDataUrl可以接收2个参数,参数一:图片类型,参数二: 图片质量0-1(不传默认为0.92)
         const dataURL = canvas.toDataURL('image/jpeg')
         resolve(dataURL)
     }
     image.onerror = () => {
         resolve({ message: '相片处理失败' })
     }
 })
},

链接: https://blog.csdn.net/weixin_63537474/article/details/133380515

相关推荐
海鸥两三2 小时前
uniapp 小程序引入 uview plus 框架,获得精美的UI框架
前端·vue.js·ui·小程序·uni-app
lightgis3 小时前
16openlayers加载COG(云优化Geotiff)
前端·javascript·html·html5
小飞大王6663 小时前
TypeScript核心类型系统完全指南
前端·javascript·typescript
你的人类朋友5 小时前
✍️记录自己的git分支管理实践
前端·git·后端
合作小小程序员小小店6 小时前
web网页开发,在线考勤管理系统,基于Idea,html,css,vue,java,springboot,mysql
java·前端·vue.js·后端·intellij-idea·springboot
防火墙在线6 小时前
前后端通信加解密(Web Crypto API )
前端·vue.js·网络协议·node.js·express
Jacky-0086 小时前
Node + vite + React 创建项目
前端·react.js·前端框架
CoderYanger7 小时前
前端基础——CSS练习项目:百度热榜实现
开发语言·前端·css·百度·html·1024程序员节
i_am_a_div_日积月累_7 小时前
10个css更新
前端·css
倚栏听风雨7 小时前
npm命令详解
前端