我们先来创建一个vue项目
然后在src目录下的assets文件夹中有一个logo.png 如果没有 你就找一找图片放这里就好了

然后来到App.vue 编写代码如下

<template>
  <div id="app">
      <button @click = "imageUrlToBase64()">截取图片</button>
      <img ref = "image" src = "@/assets/logo.png"/>
  </div>
</template>

<script>
export default {
  methods:{
    imageUrlToBase64() {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = 48;
        canvas.height = 48;
        ctx.drawImage(this.$refs.image, 0, 0, 48, 48);
        let image = new Image();
        //require
        image.src = canvas.toDataURL('image/png', 1)
        console.log(image.src);
    },
  },
};
</script>
<style lang="scss" scoped>
#app{
  margin: 0;
  padding: 0;
}
</style>

然后我们运行项目

当我们点击 截取图片

控制台就把我们img标签上的图片生成了一个base64的加密字符串

我们把这个字符串复制到浏览器地址上去看

没有任何的问题

可能有人会想说 那如果我只是想转base64 不想让用户看到呢？
这还不简单 隐藏了呗

<img ref = "image" style = "display:none" src = "@/assets/logo.png"/>