.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. TCP/IP四层与OSI七层模型

      OSI七层和TCP/IP四层的关系 1.1 OSI引入了服务.接口.协议.分层的概念,TCP/IP借鉴了OSI的这些概念建立TCP/IP模型. 1.2 OSI先有模型,后有协议,先有标准,后进行实 ...

  2. 巧妙利用SVN 实现复制需要部署的文件。

    http://blog.csdn.net/xiaoding133/article/details/39252357 http://blog.csdn.net/sinat_29173167/articl ...

  3. EBS Workflow参考资料

    参考资料: How to send an email from oracle workflow process using an AdHocRole? Notification System APIs ...

  4. 62. 63. Unique Paths 64. Minimum Path Sum

    1. A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). ...

  5. 快速SQL调优/优化(SQL TUNING)——1分钟搞定超慢SQL

    前几天,一个用户的研发人员找到我了,说他们有个SQL语句非常慢,我说多慢?他们说:半个小时也没出结果.于是问他们要了SQL语句和执行计划,SQL语句就不能再这里贴出来了,下面是调整前的执行计划(略去某 ...

  6. 使用kubeadm安装Kubernetes v1.10

    关于K8S: Kubernetes是Google开源的容器集群管理系统.它构建于docker技术之上,为容器化的应用提供资源调度.部署运行.服务发现.扩 容缩容等整一套功能,本质上可看作是基于容器技术 ...

  7. 纪念第一次ak。。。

    1.MM的数学作业 [题目大意] 今天,MM在上数学课,数学课的主题是函数.讲完以后老师留了一个家庭作业,让同学们回家思考.题目如下: 定义一个函数,F(x)表示x转成二进制后,二进制中“1”的个数. ...

  8. Python正则表达式操作指南

    摘要 本文是通过Python的 re 模块来使用正则表达式的一个入门教程,和库参考手册的对应章节相比,更为浅显易懂.循序渐进. 本文可以从 http://www.amk.ca/python/howto ...

  9. 以太网最大帧和最小帧、MTU

    根据rfc894的说明,以太网封装IP数据包的最大长度是1500字节,也就是说以太网最大帧长应该是以太网首部加上1500,再加上7字节的前导同步码和1字节的帧开始定界符,具体就是:7字节前导同步码 + ...

  10. L1-024 后天

    如果今天是星期三,后天就是星期五:如果今天是星期六,后天就是星期一.我们用数字1到7对应星期一到星期日.给定某一天,请你输出那天的“后天”是星期几. 输入格式: 输入第一行给出一个正整数D(1 ≤ D ...