前端如何把图片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

相关推荐
广州华水科技5 分钟前
单北斗GNSS在变形监测中的应用与发展新趋势
前端
宁雨桥11 分钟前
详解Web服务部署:IP+端口 vs IP+端口+目录 实战指南
前端·网络协议·tcp/ip
chengbo_eva17 分钟前
大前端全栈实践-基于nodejs实现服务端内核引擎
前端
一颗奇趣蛋22 分钟前
哨兵模式-无限滚动
前端
爱分享的鱼鱼22 分钟前
Element Plus 日期选择器(DatePicker)深度解析:从基础用法到高级定制
前端
evle39 分钟前
从 Recoil 的兴衰看前端状态管理的技术选型
前端·react.js
恋猫de小郭1 小时前
Flutter 2026 Roadmap 发布,未来计划是什么?
android·前端·flutter
时清云1 小时前
2025-年终总结
前端
Esaka_Forever1 小时前
Promise resolve 的基础用法
前端·javascript
a1117761 小时前
卡通风格 UI 组件库html (TRIZ UI Kit [特殊字符])
前端·ui·html