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

相关推荐
狐篱1 分钟前
vite 和 webpack 项目使用wasm-pack 生成的 npm 包
前端·webassembly
閞杺哋笨小孩4 分钟前
内容平台-SEO 索引提交
前端·seo
苏打水com5 分钟前
HTML/CSS 核心考点详解(字节跳动 ToB 中台场景)
java·前端·javascript
jingling5555 分钟前
react | 从零开始:使用 Create React App 创建你的第一个 React 项目
前端·javascript·react.js
nnnnna9 分钟前
watch监听(一篇文章彻底搞懂watch监听)
前端·vue.js
科普瑞传感仪器14 分钟前
基于六维力传感器的机器人柔性装配,如何提升发动机零部件装配质量?
java·前端·人工智能·机器人·无人机
步步为营DotNet15 分钟前
深入理解IAsyncEnumerable:.NET中的异步迭代利器
服务器·前端·.net
JackieDYH18 分钟前
CSS滚动吸附详解:构建精准流畅的滚动体验-scroll-snap-type
前端·css