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

相关推荐
ohyeah5 分钟前
用 Coze 打造你的教育智能客服:从想法到前端集成的完整实践
前端·coze·trae
雨雨雨雨雨别下啦7 分钟前
【从0开始学前端】 Git版本控制系统
前端·git
前端一课15 分钟前
【前端每天一题】 第 15 题:CSS 水平垂直居中高频方案(Flex / Grid / transform 等)
前端·面试
前端一课19 分钟前
【前端每天一题】🔥 第 19 题:什么是重排(Reflow)和重绘(Repaint)?有什么区别?如何减少?
前端·面试
前端一课19 分钟前
【前端每天一题】🔥 第 14 题:Promise.then 链式调用执行顺序
前端·面试
前端一课20 分钟前
【前端每天一题】🔥 第 18 题:防抖和节流是什么?区别是什么?如何实现?
前端·面试
前端一课22 分钟前
【前端每天一题】第 16 题:数组去重高频方法(Set / filter / reduce / 对象键值法)
前端·面试
前端一课23 分钟前
【前端每天一题】🔥 第 17 题:什么是浅拷贝与深拷贝?如何实现深拷贝?
前端·面试
前端一课25 分钟前
【前端每天一题】🔥 第 20 题:从输入 URL 到页面渲染全过程
前端·面试
前端一课27 分钟前
【前端每天一题】🔥 第 12 题:== 与 === 的区别?为什么 [] == ![] 是 true?
前端·面试