通过canvas将图片转为BASE64格式

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就当是一个假的地址。
结果果然好使了。

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

推荐阅读更多精彩内容

  • 点击查看原文 Web SDK 开发手册 SDK 概述 网易云信 SDK 为 Web 应用提供一个完善的 IM 系统...
    layjoy阅读 14,037评论 0 15
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,786评论 25 709
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,281评论 19 139
  • (1)清茶熬成牛血了, 茶叶变煮成纸了, 不说尕妹妹有钱的变心了, 还说是阿哥愁成个鬼了 (2)花花子的麻雀儿绿翅...
    开心果_c632阅读 2,022评论 7 8
  • 如果说,十年修得柯景腾,百年修得王小贱, 千年修得李大仁,那今天要介绍的男主角,可能要消耗众位万年修炼。毕竟,因...
    轻生活馆阅读 282评论 0 0