把图片路径转换成base64

一、定义方法

    getBase64(img){
            function getBase64Image(img,width,height) {
                var canvas = document.createElement("canvas");
                canvas.width = width ? width : img.width;
                canvas.height = height ? height : img.height;
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                var dataURL = canvas.toDataURL();
                return dataURL;
            }
            var image = new Image();
            image.crossOrigin = '';
            image.src = img;
            var deferred=$.Deferred();
            if(img){
                image.onload =function (){
                    deferred.resolve(getBase64Image(image));
                }
                return deferred.promise();
            }
        }

调用方法

  let urlList = [];
      let urlBase = '';
      list..forEach(e => {
        this.getBase64(e.picUrl).then(res => {
          console.log(res)
          urlBase = res
        })
        let map = {
          id: e.id,
          picUrl: urlBase
        }
        urlList.push(map)
        console.log(urlList)
      })

二、全局方式

先在main.js文件中定义转换方法

//图片转换base64 ，异步处理
Vue.prototype.$base64Img = (path) => {  
       //转码格式方法
  function getBase64Image(img) { 
    var canvas = document.createElement("canvas"); // 创建一个canvas
    canvas.width = img.width; // 设置对应的宽高
    canvas.height = img.height;
    var ctx = canvas.getContext("2d"); // 二维绘图环境
    ctx.drawImage(img, 0, 0, img.width, img.height); // 将图片画在画布上
    var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase(); // 获取到图片的格式
    var dataURL = canvas.toDataURL("image/" + ext); // 得到base64 编码的 dataURL 
    return dataURL;
  }
  return new Promise(function (resolve, reject) { //使用Promise进行异步处理
    let image = new Image();
    //解决图片跨域问题
    image.crossOrigin = '';
    //获取传入的图片路径
    image.src = path;
    //图片加载完后的回调函数,调用转码函数
    image.onload = function () {
      resolve(getBase64Image(image)) //回调函数返回base64值
    }
  })
}

在页面中调用 同上

  let urlList = [];
    let urlBase = '';        
    // list=[ { url: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg", id: '1' }]
    this.list.forEach(e => {   
      this.$base64Img(e.url).then((res) => {		//调用全局方法
        // console.log(res)
        urlBase = res
        var map = {
          url: res,
          id: e.id
        }
        urlList.push(map)
        sessionStorage.site = JSON.stringify(urlList)     //添加到图片数组上进行渲染
        // sessionStorage.setItem(JSON.stringify(urlList))
      })
    })
    this.imgUrl = JSON.parse(sessionStorage.site)
    console.log(this.imgUrl)
  }

引入jQuery

1、下载插件

 cnpm install jquery --save

2、在main.js中引入

import $ from 'jquery';

3、在build文件夹下的webpack.base.conf.js文件添加配置

const webpack = require('webpack')
odule.exports = {
// 添加jquery代码
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      jquery: "jquery",
      "window.jQuery": "jquery"
    })
  ],
}

4、使用：

//需要的 Vue 组件中引入 jQuery 和定义图片转换为 base64 的方法
export default {
  methods: {
    imageToBase64(imageUrl) {
      // 使用 jQuery 发起 AJAX 请求获取图片数据
      $.ajax({
        url: imageUrl,
        method: 'GET',
        encoding: 'binary', // 设置编码格式为二进制
        success: function(data) {
          // 将获取到的图片数据转换为 base64 格式
          const base64data = btoa(data);
          console.log(base64data); // 输出 base64 数据
        },
        error: function(error) {
          console.error('转换图片到base64时出现错误：', error);
        }
      });
    }
  }
}

//在需要调用的地方调用 imageToBase64 方法并传入图片地址：

this.imageToBase64('https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg');