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

有的时候基于业务需求,我们需要把图片转化为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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一份礼物,要让它变得很特别,包装是一定少不了的,但是一个好的包装也是很重要的,接下来为大家分享一个简单而又有创意的...
    zxc789阅读 590评论 0 2
  • 你躺着,睁着眼睛,毫无聚焦,通红的眼睛望着天花板,闹钟一直响,可你没有一点反应,也许是眼睛太过酸涩,两行泪毫无预兆...
    拉萨街头阅读 457评论 17 13
  • 我是个还算北方的女孩子,我从小生活的城市是一个在北方人眼里偏南,在南方人眼里是北的地方。导致我的性格刚毅的不彻底,...
    洁哒哒爱吃东坡肉阅读 352评论 0 0