关于图片转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. mui框架 页面无法滚动解决方法

    只需要初始化一下就可以了 mui.init(); 加下面这段代码即可: (function($){ $(".mui-scroll-wrapper").scroll({ //boun ...

  2. MYSQL有外键无法删除

    今天删除数据库中数据,提示因为设置了foreign key,无法修改删除 可以通过设置FOREIGN_KEY_CHECKS变量来避免这种情况. SET FOREIGN_KEY_CHECKS=0; 删除 ...

  3. linux命令(1):sed命令

    实例一: Config_file文件内容如下: sed去除注释行:sed -i -c -e '/^#/d' config_file  [会删除指定文件带有注释行] sed去除空行: sed -i -c ...

  4. 多路复用I/O模型epoll() 模型 代码实现

    epoll模型 int epoll_create(int maxevent) //创建一个epoll的句柄 然后maxevent表示监听的数目的大小int epoll_ctl(int epollfd, ...

  5. MySQL-数据操作

    阅读目录 一 介绍 二 插入数据INSERT 三 更新数据UPDATE 四 删除数据DELETE 五 查询数据SELECT 回到顶部 一 介绍 MySQL数据操作: DML ============= ...

  6. 今天开始学模式识别与机器学习(PRML),章节5.1,Neural Networks神经网络-前向网络。

    今天开始学模式识别与机器学习Pattern Recognition and Machine Learning (PRML),章节5.1,Neural Networks神经网络-前向网络. 话说上一次写 ...

  7. Single Number I&& II——还没看,倒过头来再看

    Single Number I Given an array of integers, every element appears twice except for one. Find that si ...

  8. VS的使用

    配置一个工程 问题描述: 要运行一个源码工程,工程中含有层级目录,.cpp与.h在多级目录中混合存储.并且该工程的运行依赖一些静态库(.lib)与动态库(.dll). 建立: 把.h拷贝至$(Proj ...

  9. PHP给图片加水印具体实现

    给图片加水印实现方法如下: class Mark { public function __construct() { } /** * 加水印 * @param file $srcImg 要加水印的图片 ...

  10. 视频H5のVideo标签在微信里的坑和技巧

    随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 也越来越普遍了,相比帧动画,视频的表现更加丰富,前段时间开发了一个以视频为主的移动端 HTML5 ...