关于图片转base64然后提交后台，项目中一直用的是canvas的toDataUrl方法，但是之前看HTML5 API文档的时候，一直记得好像有个叫fileReader的东西也可以做到。于是过年无事的时候，把两种方法都写成了插件形式。
https://github.com/tiamoyajie/Zepto/blob/master/task/js/Zepto.GetImgBase64.2.js
https://github.com/tiamoyajie/Zepto/blob/master/task/js/Zepto.GetImgBase64.js

第一种是canvas的方法实现的，canvas只兼容ie9以上的浏览器，若兼容IE8需要引用额外的JS包；
第二种是H5的新API——fileReader的readAsDataURL()方法实现的，此方法兼容IE10以上的浏览器，和第一种相比，这种方法更为简单方便一些；
若需要做上传预览功能，可用canvas把图片显示出来；

img转base64的两种方式的比较的更多相关文章

  1. js 图片base64转file文件的两种方式

    js 图片base64转file文件的两种方式 https://blog.csdn.net/yin13037173186/article/details/83302628 //将base64转换为bl ...

  2. Java通过图片url地址获取图片base64位字符串的两种方式

    工作中遇到通过图片的url获取图片base64位的需求.一开始是用网上的方法,通过工具类Toolkit,虽然实现的代码比较简短,不过偶尔会遇到图片转成base64位不正确的情况,至今不知道为啥. 之后 ...

  3. 将图片base64格式转换为file对象并读取（两种方式读取）

    两种方式读取,一种URL.createObjectURL,另一种fileReader   var base64 = ` data:image/jpeg;base64,/9j/4AAQSkZJRgABA ...

  4. Express全系列教程之(四)：获取Post参数的两种方式

    一.关于POST请求 post方法作为http请求很重要的一部分,几乎所有的网站都有用到它,与get不同,post请求更像是在服务器上做修改操作,它一般用于数据资源的更新.相比于get请求,post所 ...

  5. C和C#两种方式实现邮件的简单发送

    内容为通过两种方式发送邮件--1.C语言发送邮件   2.C#发送邮件 一,C语言进行邮件的发送 C语言发送邮件的步骤的简单解析: 1.创建TCP连接    socket() 2.连接到邮箱服务器  ...

  6. Eclipse项目中引用第三方jar包时将项目打包成jar文件的两种方式

    转载自:http://www.cnblogs.com/lanxuezaipiao/p/3291641.html 方案一:用Eclipse自带的Export功能 步骤1:准备主清单文件 “MANIFES ...

  7. centos安装图形界面通常有两种方式

    centos安装图形界面通常有两种方式   1.通过系统安装,在配置选择软件界面,选择GNOME桌面模式.

  8. Struts2实现ajax的两种方式

    基于Struts2框架下实现Ajax有两种方式,第一种是原声的方式,另外一种是struts2自带的一个插件. js部分调用方式是一样的: JS代码: function testAjax() { var ...

  9. CSharpGL(18)分别处理glDrawArrays()和glDrawElements()两种方式下的拾取(ColorCodedPicking)

    CSharpGL(18)分别处理glDrawArrays()和glDrawElements()两种方式下的拾取(ColorCodedPicking) 我在(Modern OpenGL用Shader拾取 ...

随机推荐

  1. service XXX start启动报start: Rejected send message, 1 matche

    转,原文地址:http://blog.sina.com.cn/s/blog_56d8ea9001018w1l.html [问题]start: Rejected send messag现象:crifan ...

  2. IE6下面的浮动问题

    第一个问题: 在IE6下面overflow:hidden;失效      原因:在IE6/7中子级设置position:relative;属性值后,导致父级的overflow:hidden;失效.   ...

  3. 80端口被System进程占用问题

    更新: 有可能占用80端口的服务: 如果安装了IIS,关闭IIS: 如果未开启IIS功能,而安装了诸如Web Matrix的开发程序,则有可能被Web Development Agent Servic ...

  4. HDU 2829 Lawrence（斜率优化DP O（n^2））

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2829 题目大意:有一段铁路有n个站,每个站可以往其他站运送粮草,现在要炸掉m条路使得粮草补给最小,粮草 ...

  5. kubernetes如何要使用用户名和密码登陆harbor以拉取docker镜像，应该如何操作？

    还好,网上有相应的CASE处理. http://www.jianshu.com/p/ffbfb44dc496 =========================== 先生成名为为regsecret的S ...

  6. 探索sklearn | 鸢尾花数据集

    1 鸢尾花数据集背景 鸢尾花数据集是原则20世纪30年代的经典数据集.它是用统计进行分类的鼻祖. sklearn包不仅囊括很多机器学习的算法,也自带了许多经典的数据集,鸢尾花数据集就是其中之一. 导入 ...

  7. 配置nginx作为下载站点

    nginx默认情况是不允许列出整个目录浏览下载 1)autoindex参数详解 autoindex on //on开启目录浏览 autoindex_exact_size off; //off显示出文件 ...

  8. phpqrcode生成带logo的二维码图片

    <?php //include_once('lib/QrReader.php'); //$qrcode = new QrReader('201708211144474410.jpg'); //图 ...

  9. 一款你不容错过的Laravel后台管理扩展包 —— Voyager

    http://laravelacademy.org/post/6401.html  Posted on 2016年11月1日 by  学院君 1.简介 Voyager是一个你不容错过的Laravel后 ...

  10. 转：libFuzzer Tutorial(libFuzzer教程)

    转:https://github.com/google/fuzzer-test-suite/blob/master/tutorial/libFuzzerTutorial.md 本文在Ubuntu16下 ...