怎么用js对图片进行base64编码

Question

项目是在vue.js环境下

Answer 1

 var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            $('#imgLogoImg').attr('src', this.result);
            base64img = this.result;
            //alert(this.result); //就是base64
        }

Answer 2

image->canvas->todataurl()

例如

canvas.getContext("2d").drawImage(image, 0, 0).toDataURL("image/png"); 

Answer 3

H5有对应API:FileReader,以及他的函数readAsDataURL([obj])．．．但是Ｖｕｅ．ｊｓ没用过...我觉得都是JS实现，那不就是一样的么

Answer 4

最近刚好做这个，在Stack Overflow上面发现的答案，很靠谱，粘贴到这里来居然被忽略，什么情况啊……

HTML代码：

<form enctype="multipart/form-data">
    <input type="file" @change="onFileChange">//点击这里上传图片
    <p id="b64"></p>//这里展示生成的base64码
    <img alt="" id="img" height="150">//这里展示图片预览
</form>

Vue代码：

  export default {
    data () {
      return {
        fileinput:''
      }
    },
    methods: {
      onFileChange (e) {
        var files = e.target.files || e.dataTransfer.files;
        if (!files.length)
          return;
        this.createInput(files[0]);
      },
      createInput(file){
        var reader = new FileReader();
        reader.onload = (e) => {
          $("#b64").html(reader.result);
          $("#img").attr('src',reader.result)
        }
        reader.readAsDataURL(file);
      }
    }
  }