美文网首页Web 前端开发 让前端飞
通过canvas将图片转为BASE64格式

通过canvas将图片转为BASE64格式

作者: 孫仲谋 | 来源:发表于2017-11-16 19:51 被阅读0次
    function getBase64Image(img) {//传入图片
        var canvas = document.createElement("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);
        return dataURL;
    }
    

    有时候后台需要接受的是base64的文件。我们可以在获取图片之后调用这个函数进行转换。
    在项目里我用了elementui的上传文件功能。
    比较坑的是他有一个必填的action,而我后端的接口没有专门存放图片的地方。
    后来我就想了一个比较搞笑的方法找一个参数少的查询接口。放上去该拼参数拼参数,该设header设header就当是一个假的地址。
    结果果然好使了。

    相关文章

      网友评论

        本文标题:通过canvas将图片转为BASE64格式

        本文链接:https://www.haomeiwen.com/subject/egsrvxtx.html