js 将图片转为base64格式

漫天绯羽

已于 2023-06-12 11:33:58 修改

阅读量2.2k

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-06-09 16:46:28 首次发布

本文链接：https://blog.csdn.net/qq_36762151/article/details/131130008

版权

文章介绍了两种在Vue中处理图片的方法：一是利用canvas绘制本地路径图片并转换为Base64；二是通过网络请求获取图片，处理Blob并解决跨域问题。同时提到了devServer配置中的代理设置来处理跨域。

摘要由CSDN通过智能技术生成

两种方式：

1. 利用canvas绘制图片：适用转换本地路径图片

2. 通过网络请求图片地址，并返回blob格式，再操作：适用服务器端图片

1.利用canvas绘制

 data() {
   return {
     img4:""
               
    }
 },
 mounted(){
          this.imgToBase64Cancas('./assets/image/1.jpg',(base64)=>{
                this.img4 = base64

            })
          
        },
methods:{
     imgToBase64Cancas(url,callback){
        const image = new Image()
         image.src = url
         image.onload = () => {
             const canvas = document.createElement('canvas')
             canvas.width = image.naturalWidth // 使用 naturalWidth 为了保证图片的清晰度
             canvas.height = image.naturalHeight
             canvas.style.width = `${canvas.width / window.devicePixelRatio}px`
             canvas.style.height = `${canvas.height / window.devicePixelRatio}px`
             const ctx = canvas.getContext('2d')
             if (!ctx) {
               return null
             }
             ctx.drawImage(image, 0, 0)
             const base64 = canvas.toDataURL('image/png')
             callback(base64)
         }
         image.onerror = (err) => {
             callback('')
         }
      },
}

./assets/image/1.jpg 项目中的静态资源图片

2.通过网络请求

img1: "https://img2.baidu.com/it/u=3443670360,1452319546&fm=253&fmt=auto&app=138&f=JPEG?w=761&h=500",
  
 this.imgToBase64Http(this.img1,(base64)=>{
    // 注意：图片很可能存在跨域问题，
    this.img2 = base64
  })


imgToBase64Http(url,callback) {

                    let xhr = new XMLHttpRequest();
                    xhr.open('get', url, true);
                    // 重点1
                    xhr.responseType = 'blob';
                    xhr.onload = function() {
                        if (this.status == 200) {
                            //得到一个blob对象
                            let blob = this.response;
                            // 重点2
                            let oFileReader = new FileReader();
                            oFileReader.onloadend = function(e) {
                                // 结果
                                const base64 = e.target.result
                                callback(base64)

                            };
                            oFileReader.readAsDataURL(blob);
                        }
                    };
                    xhr.send();
            }

需要转化的图片很可能存在跨域问题，要么后端处理，要么前端处理。这里是使用时在vue中处理了跨域问题
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/api': {
        target: 'http://-----:8084'
        changeOrigin: true,
        ws: true,
        pathRewrite: {

          '^/api': ''
        }
      }
    }
  },
使用图片路径：/api+图片剩余路径