美文网首页
同源下的图片转化为Base64的方法

同源下的图片转化为Base64的方法

作者: ErrorCode233 | 来源:发表于2018-07-19 11:50 被阅读6次

    有的时候基于业务需求,我们需要把图片转化为base64格式的图片,然后就有了以下方法:

    function getBase64Image(img) {  
        // 传入参数:图片URL 不接受跨域资源
        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;  
    } 
    

    原理非常简单,将图片绘制到canvas中,然后使用canvas的toDataURL方法就可以将图片转化为base64格式的图了。

    参考:toDataURL - MDN

    相关文章

      网友评论

          本文标题:同源下的图片转化为Base64的方法

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