前端图片转base64

最新推荐文章于 2024-02-09 23:20:47 发布

开心羊羊

最新推荐文章于 2024-02-09 23:20:47 发布

阅读量631

点赞数 1

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_50622621/article/details/130146731

版权

        imageUrl2Base64(url) {
             //使用此方法得压缩图片
             return new Promise((resolve, reject) => {
                 if (url) {
                     let image = new Image()
                     //解决跨域报错，必须写在赋值给image.src的前面，否则偶尔报错，也可以这样写                                
                     image.setAttribute('crossOrigin', 'anonymous');
                     image.crossOrigin = 'anonymous'
                     image.src = url
                     //等待图片加载完成，转换图片为base64，异步
                     image.onload = function () {
                         let canvas = document.createElement('canvas')
                         canvas.width = image.width
                         canvas.height = image.height
                         let ctx = canvas.getContext('2d')
                         ctx.drawImage(image, 0, 0, image.width, image.height)
                         let base64 = canvas.toDataURL('image/png')
                         resolve(base64)
                     }
                 }
             })
         },
         getBase64(imgUrl) {
             return new Promise((resolve, reject) => {
                 window.URL = window.URL || window.webkitURL
                 let xhr = new XMLHttpRequest()
                 xhr.open('get', imgUrl, true)
                 xhr.responseType = 'blob'
                 xhr.onload = function () {
                     if (this.status == 200) {
                         //得到一个blob对象
                         let blob = this.response
                         // 至关重要
                         let oFileReader = new FileReader()
                         oFileReader.onloadend = function (e) {
                             // 此处拿到的已经是base64的图片了,可以赋值做相应的处理
                             // console.log(e.target.result)
                             resolve(e.target.result)
                         }
                         oFileReader.readAsDataURL(blob)
                     }
                 }
                 xhr.send()
             })
         },