[转]DataURL与File,Blob,canvas对象之间的互相转换的Javascript
来源 http://blog.csdn.net/cuixiping/article/details/45932793
canvas转换为dataURL (从canvas获取dataURL)
var dataurl = canvas.toDataURL('image/png');
var dataurl2 = canvas.toDataURL('image/jpeg', 0.8);
File对象转换为dataURL、Blob对象转换为dataURL
File对象也是一个Blob对象,二者的处理相同。
function readBlobAsDataURL(blob, callback) {
var a = new FileReader();
a.onload = function(e) {callback(e.target.result);};
a.readAsDataURL(blob);
}
//example:
readBlobAsDataURL(blob, function (dataurl){
console.log(dataurl);
});
readBlobAsDataURL(file, function (dataurl){
console.log(dataurl);
});
dataURL转换为Blob对象
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}
//test:
var blob = dataURLtoBlob('data:text/plain;base64,YWFhYWFhYQ==');
dataURL图片数据绘制到canvas
先构造Image对象,src为dataURL,图片onload之后绘制到canvas
var img = new Image();
img.onload = function(){
canvas.drawImage(img);
};
img.src = dataurl;
File,Blob的图片文件数据绘制到canvas
还是先转换成一个url,然后构造Image对象,src为dataURL,图片onload之后绘制到canvas
利用上面的 readBlobAsDataURL 函数,由File,Blob对象得到dataURL格式的url,再参考 dataURL图片数据绘制到canvas
readBlobAsDataURL(file, function (dataurl){
var img = new Image();
img.onload = function(){
canvas.drawImage(img);
};
img.src = dataurl;
});
不同的方法用于构造不同类型的url (分别是 dataURL, objectURL(blobURL), filesystemURL)。这里不一一介绍,仅以dataURL为例。
filesystemURL不是指本地文件URL的形式(file:///….), 而是格式类似于 filesystem:http://...
的一种URL,支持沙盒文件系统的浏览器支持(目前仅Chrome)支持。
Canvas转换为Blob对象并使用Ajax发送
转换为Blob对象后,可以使用Ajax上传图像文件。
先从canvas获取dataurl, 再将dataurl转换为Blob对象
var dataurl = canvas.toDataURL('image/png');
var blob = dataURLtoBlob(dataurl);
//使用ajax发送
var fd = new FormData();
fd.append("image", blob, "image.png");
var xhr = new XMLHttpRequest();
xhr.open('POST', '/server', true);
xhr.send(fd);
[转]DataURL与File,Blob,canvas对象之间的互相转换的Javascript的更多相关文章
- DataURL与File,Blob,canvas对象之间的互相转换的Javascript
canvas转换为dataURL (从canvas获取dataURL) var dataurl = canvas.toDataURL('image/png'); var dataurl2 = canv ...
- DataURL与File,Blob,canvas对象之间的互相转换的Javascript (未完)
canvas转换为dataURL (从canvas获取dataURL) var dataurl = canvas.toDataURL('image/png'); var dataurl2 = canv ...
- xsd与xml和类(class)对象之间的互相转换
xsd与xml和类(class)对象之间的互相转换 . 第一:通过现有的已经写好的xsd来生成class(.cs)文件. 在您Visual Studio的安装目录下的SDKv2.0Bin中有个应用程序 ...
- jQuery的文件引入、入口函数以及js对象和jquery对象之间的互相转换
JavaScript与jquery的区别 JavaScript是一门编程语言,用来编写客户端浏览器脚本. jQuery是javascript的一个库,包含多个可重用的函数,用来辅助简化javascri ...
- PHP数组与对象之间用递归转换
2 3 4 5 6 7 8 function object_to_array($e) { $_arr = is_object($e) ? get_object_vars($e) : $e; ...
- C++内置类型对象之间的转换
C++定义了一组内置类型对象之间的标准转换,在必要时它们被编译器隐式地应用到对象上. 隐式类型转换发生在下列这些典型情况下. 1. 在混合类型的算数表达式中 规则:在这种情况下最宽的数据类型成为目标转 ...
- 存在继承关系的Java类对象之间的类型转换(一)
类似于基本数据类型之间的强制类型转换. 存在继承关系的父类对象和子类对象之间也可以 在一定条件之下相互转换. 这种转换需要遵守以下原则: 1.子类对象可以被视为是其父类的一个对象2.父类对象不能被 ...
- jquery对象与dom对象之间互相转换的方法
本文主要讲述jquery对象和js里的dom对象之间互相转换的方法,使jquery对象可以直接使用js里的方法,或js里的dom对象使用jquery里的方法. jquery对象和dom对象是不一样的, ...
- JavaScript中各种对象之间的关系
上图: 此外,补充一下图中用到的概念: 1.内置(Build-in)对象与原生(Naitve)对象的区别在于:前者总是在引擎初始化阶段就被创建好的对象,是后者的一个子集:而后者包括了一些在运行过程中动 ...
随机推荐
- java连接mysql数据库详细步骤解析
java连接mysql数据库详细步骤解析 第一步:下载一个JDBC驱动包,例如我用的是:mysql-connector-java-5.1.17-bin.jar 第二步:导入下载的J ...
- Selenium2学习-042-Selenium3启动Firefox Version 48.x浏览器(ff 原生 geckodriver 诞生)
今天又被坑了一把,不知谁把 Slave 机的火狐浏览器版本升级为了 48 的版本,导致网页自动化测试脚本无法启动火狐的浏览器,相关的网页自动化脚本全线飘红(可惜不是股票,哈哈哈...),报版本不兼容的 ...
- Sublime WiFi真机同步和WiFi真机预览使用说明
概述WiFi真机同步: 通过在Sublime中建立调试服务,接收真机设备主动连接调试的方式,配合apploader及自定义loader,为开发者提供在局域网内通过WiFi实现应用快速真机同步和实时预览 ...
- Android 2D Graphics学习 Region和Canvas裁剪
1.首先介绍Region类 Region,中文意思即区域的意思,它表示的是canvas图层上的某一块封闭的区域. /**构造方法*/ public Region() //创建一个空的区域 publi ...
- c# unchecked关键字。byte 合并short
参考MSDN 代码: public class BytesOperate { /// <summary> /// 计算校验和,SUM /// </summary> public ...
- 解决从jenkins打开robot framework报告会提示‘Opening Robot Framework log failed ’的问题
最新的jenkins打开jenkins robot framework报告会提示如下 Verify that you have JavaScript enabled in your browser. ...
- javascript 中的 let 作用域
let 声明了一个块级域的局部变量,并且可以给它一个初始化值. 语法EDIT let var1 [= value1] [, var2 [= value2]] [, ..., varN [= value ...
- [原创]java WEB学习笔记109:Spring学习---spring对JDBC的支持:使用 JdbcTemplate 查询数据库,简化 JDBC 模板查询,在 JDBC 模板中使用具名参数两种实现
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- c++的一个有趣的程序
最近在作一个实验题:输出一个点移动一个点.如果大神们有更简单的方法,请指点. 这个是成果,很有趣 望大神们指点一二: #include<iostream>#include<stdli ...
- js事件监听/鼠标滚轮/行为/冒泡/键盘的兼容性写法
addEvent:function(el,type,fn,capture) { if (window.addEventListener) { if (type === "mousewheel ...