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

相关推荐
魂祈梦25 分钟前
前端下载多个文件/浏览器批量下载文件
前端·浏览器
小明记账簿_微信小程序32 分钟前
手写一个webpack插件(plugin)
前端
我命由我1234539 分钟前
微信小程序 - scroll-view 的一些要点(scroll-view 需要设置滚动方向、scroll-view 需要设置高度)
开发语言·前端·javascript·微信小程序·小程序·前端框架·js
BD_Marathon1 小时前
【JavaWeb】CSS浮动
前端·css
1024肥宅1 小时前
手写 Promise:深入理解 JavaScript 异步编程的核心
前端·javascript·promise
铅笔侠_小龙虾1 小时前
Vue 学习目录
前端·vue.js·学习
悟能不能悟1 小时前
vue的history和hash模式有什么不一样
前端·vue.js
晓庆的故事簿1 小时前
前端的浏览器地址传参
前端
*星星之火*1 小时前
【大白话 AI 答疑】第6篇 大模型指令微调:instruction/input/output核心解析及案例
服务器·前端·人工智能
北杳同学2 小时前
前端一些用得上的有意思网站
前端·javascript·vue.js·学习