.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. 加密算法(DES,AES,RSA,MD5,SHA1,Base64)比较和项目应用

    加密技术通常分为两大类:"对称式"和"非对称式". 对称性加密算法:对称式加密就是加密和解密使用同一个密钥.信息接收双方都需事先知道密匙和加解密算法且其密匙是相 ...

  2. ubuntu 用户和root权限转换

    1,用户权限要转换为root 输入:sudo su   或者sudo -i  然后按照提示输入相应的密码你就可以转化为root用户了. 2,root权限切换成用户权限 输入:su  如果是服务器那就输 ...

  3. UVA-1632 Alibaba (区间DP+滚动数组)

    题目大意:在一条直线上有n件珠宝,已知每件珠宝的位置,并且第 i 件珠宝在 ti 时刻就消失,问能否将所有的珠宝收集起来?如果能,求出最短时间.搜集能瞬间完成. 题目分析:区间DP.dp(i,j,0) ...

  4. Chrome DevTools 的 Sources 调试

    在 Chrome 中调试 JS 代码,那你不得不与 Chrome DevTools 的 Sources 面板打交道,所以文章主要通过介绍 Sources 面板上的各部分功能来介绍如何调试网页中的 JS ...

  5. Leetcode 89

    回溯写到自闭:不想就删了: class Solution { public: vector<int> grayCode(int n) { vector<vector<int&g ...

  6. Python学习之路day3-集合

    一.概述 集合(set)是一种无序且不重复的序列. 无序不重复的特点决定它存在以下的应用场景: 去重处理 关系测试 差集.并集.交集等,下文详述. 二.创建集合 创建集合的方法与创建字典类似,但没有键 ...

  7. 《程序员面试金典》习题解答(C/C++)

    一.数据结构 1.数组与字符串 1.1  实现一个算法,确定一个字符串的所有字符是否全都不同.假使不允许使用额外的数据结构,又该如何处理? /* 假设字符集为ASCII字符串,那么字符串至多有256个 ...

  8. 数据结构(C语言)关于树、二叉树、图的基本操作。

    1) 编写算法函数int equal(tree t1, tree t2),判断两棵给定的树是否等价: int equal(tree t1,tree t2) { int k; if(t1==NULL&a ...

  9. DevExpress v17.2新版亮点—Mobile Controls篇

    用户界面套包DevExpress v17.2日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了Mobile Controls v17.2 的新功能,快来下载试用新版本! New ...

  10. 【DevExpress v17.2新功能预告】WinForms上的图表增强

    在WinForms Charts v17.2中,我们新增了一些有用的功能,开发人员和最终用户可能都会喜欢. 基于标准的过滤 Chart控件已经支持一系列的过滤,但是在这个版本中,我们用FilterCr ...