.toDataURL()

FileReader对象也有类似的方法,比如.readAsDataURL(),然而它只接受fileblob类型,而这两种类型一般只能通过<input[type=file]>元素的files属性获取,或者用Blob()构造函数手工创建一个新的对象。尴尬的是我们当前只有图片路径,受制于浏览器的安全策略,<input[type=file]>files属性是只读的,而Blob()构造函数只接受文件内容,两种方式都无法通过图片路径直接获取。上文中假设的应用场景迫使我们必先考虑如何通过路径获取到图片内容。<img>是可以的,并且可以被绘制到<canvas>中,而<canvas>正巧拥有.toDataURL()方法。

万事具备,我们只需要把<img>获取到的图片放到<canvas>里再通过.toDataURL()方法转化下,就可以得到以 base64 编码的 dataURL。来看这个方法的语法:

canvas.toDataURL([type, encoderOptions]);

canvas 是 DOM 元素<canvas>对象;参数type指定图片类型,如果指定的类型不被支持则以默认值image/png替代;encoderOptions可以为image/jpegimage/webp类型的图片设置图片质量,取值0-1,超出则以默认值0.92替代。

需要注意的是,图片加载是异步的,在转换成 dataURL 前必须先确保图片成功加载到,否则让 canvas 即刻执行绘制可能失败,从而导致转换 dataURL 失败。于是.toDataURL()方法应该写在<img>onload事件中,以确保 canvas 的绘制工作在图片下载完成后开始。好在.drawImage()方法是同步的,只有在 canvas 绘制完成后才会执行后续操作,比如.toDataURL()

web上传照片的更多相关文章

  1. 前端之web上传文件的方式

    前端之web上传文件的方式 本节内容 web上传文件方式介绍 form上传文件 原生js实现ajax上传文件 jquery实现ajax上传文件 form+iframe构造请求上传文件 1. web上传 ...

  2. 【代码笔记】iOS-图片手势,上传照片

    代码: RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController : UIViewControl ...

  3. Iphone H5上传照片被旋转

    最近做项目发现在Iphone下,我们上传图片都会被翻转,最后查阅资料发现,的确是IOS的问题 不说过程,直接解决方法 iOS下,html方式使用<input type="file&qu ...

  4. 第九篇:web之前端之web上传文件的方式

    前端之web上传文件的方式   前端之web上传文件的方式 本节内容 web上传文件方式介绍 form上传文件 原生js实现ajax上传文件 jquery实现ajax上传文件 form+iframe构 ...

  5. Android使用XUtils框架上传照片(一张或多张)和文本,server接收照片和文字(无乱码)

    Android上传图片,这里我使用了如今比較流行的XUtils框架.该框架能够实现文件上传.文件下载.图片缓存等等,有待研究. 以下是Android端上传的代码: xUtils.jar下载 Strin ...

  6. Web上传文件的原理及实现

    现在有很多Web程序都有上传功能,实现上传功能的组件或框架也很多,如基于java的Commons FileUpload.还有Struts1.x和Struts2中带的上传文件功能(实际上,Struts2 ...

  7. WEB上传大文件解决方案

    众所皆知,web上传大文件,一直是一个痛.上传文件大小限制,页面响应时间超时.这些都是web开发所必须直面的. 本文给出的解决方案是:前端实现数据流分片长传,后面接收完毕后合并文件的思路.下面贴出简易 ...

  8. FTP上传和WEB上传的区别

       说区别之前,咱先说说什么是上传?上传就是将信息从个人计算机(本地计算机)传递到中央计算机(远程计算机)系统上,让网络上的人都能看到.将制作好的网页.文字.图片等发布到互联网上去,以便让其他人浏览 ...

  9. requests模拟上传照片

    博客园相册管理中有上传照片的功能 现在通过requests库模拟上传图片功能 先手动上传图片,用Fiddler转包,查看到上传图片接口请求格式, ------WebKitFormBoundarySKZ ...

随机推荐

  1. 『cs231n』作业1选讲_通过代码理解KNN&交叉验证&SVM

    通过K近邻算法探究numpy向量运算提速 茴香豆的“茴”字有... ... 使用三种计算图片距离的方式实现K近邻算法: 1.最为基础的双循环 2.利用numpy的broadca机制实现单循环 3.利用 ...

  2. uva-10561-nim

    题意: 给出一个连续的棋盘,有的位置为'.',有的位置为'X',二者轮流下子,当有一方获得连续三个子的时候取胜. 对于胜态,一种情况是当前局面出现"XX"/"X.X&qu ...

  3. JS水平移动图片

    横向: <div id=demo style="overflow:hidden;width:200px;border:2px solid #e0e0e0;padding:2px;&qu ...

  4. js 刷新页面

    Javascript刷新页面的几种方法:1 history.go(0)2 window.location.reload() window.location.reload(true) 3 locatio ...

  5. js 正则去除指定的单词

    以企业邮箱为例:@后面不能是qq   126   163  188 gmail   yahoo   sina   hotmail  suhu   sogu  等单词. <!DOCTYPE htm ...

  6. 4. Median of Two Sorted Arrays *HARD* -- 查找两个排序数组的中位数(寻找两个排序数组中第k大的数)

    There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median of the two ...

  7. ES bulk源码分析——ES 5.0

    对bulk request的处理流程: 1.遍历所有的request,对其做一些加工,主要包括:获取routing(如果mapping里有的话).指定的timestamp(如果没有带timestamp ...

  8. 桥接、nat、host-only

  9. MySQL Server类型之MySQL客户端工具的下载、安装和使用(博主推荐)

    本博文的主要内容有 .MySQL Server 5.5系列的下载 .MySQL Server 5.5系列的安装 .MySQL Server 5.5系列的使用 .MySQL Server 5.5系列的卸 ...

  10. UVALive 4174

    DES:给出一个字符串.连续空格的个数代表一个新的字符.奇数个表示0.偶数个表示1.然后根据这个码作为ASCII码.写出对应的字符.就是统计空格个数.二进制转换成十进制的小模拟.但是比赛的时候敲得很不 ...