JavaScript中图片的base64转换

  image2Base64(img,type="image/png") {

    /**

     * 1.img表示图片对象，type表示图片类型("image/png","image/jpg,...")

     * 2.创建一个canvas画布，并初始化。指定画布的宽高，使用drawImage()方法将图片填充进画布，并指定插入的位置。

     * 3.使用toDataURL()方法可以得到图片的base64字符串

    */

    let canvas = document.createElement("canvas");

    canvas.width = img.width;

    canvas.height = img.height;

    let ctx = canvas.getContext("2d");

    ctx.drawImage(img, 0, 0, img.width, img.height);

    return canvas.toDataURL(type);

  }

 

getImgBase(){

    let file = document.getElementById('file');    //获取到图片文件数组

    let imgurl = window.URL.createObjectURL(file[0]);    //获取当前图片的本地路径

    let base64="";    //声明一个字符串变量，表示生成的base64图片字符串

    let img = new Image();    //new一个图片对象

    img.src = imgurl;    //将图片的路径赋给图片对象的src

    img.οnlοad=function(){

        base64 = image2Base64(img,type);    //image2Base64是封装的图片转换方法

    }

  }

//base64变量即为得到的图片的base6d字符串

/**以上内容为个人笔记，若有疑问，欢迎大家留言。*/