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);

转载请保留来源 http://blog.csdn.net/cuixiping/article/details/45932793

DataURL与File,Blob,canvas对象之间的互相转换的Javascript的更多相关文章

  1. [转]DataURL与File,Blob,canvas对象之间的互相转换的Javascript

    来源 http://blog.csdn.net/cuixiping/article/details/45932793 canvas转换为dataURL (从canvas获取dataURL) var d ...

  2. DataURL与File,Blob,canvas对象之间的互相转换的Javascript (未完)

    canvas转换为dataURL (从canvas获取dataURL) var dataurl = canvas.toDataURL('image/png'); var dataurl2 = canv ...

  3. xsd与xml和类(class)对象之间的互相转换

    xsd与xml和类(class)对象之间的互相转换 . 第一:通过现有的已经写好的xsd来生成class(.cs)文件. 在您Visual Studio的安装目录下的SDKv2.0Bin中有个应用程序 ...

  4. jQuery的文件引入、入口函数以及js对象和jquery对象之间的互相转换

    JavaScript与jquery的区别 JavaScript是一门编程语言,用来编写客户端浏览器脚本. jQuery是javascript的一个库,包含多个可重用的函数,用来辅助简化javascri ...

  5. PHP数组与对象之间用递归转换

    2 3 4 5 6 7 8  function object_to_array($e) {      $_arr = is_object($e) ? get_object_vars($e) : $e; ...

  6. C++内置类型对象之间的转换

    C++定义了一组内置类型对象之间的标准转换,在必要时它们被编译器隐式地应用到对象上. 隐式类型转换发生在下列这些典型情况下. 1. 在混合类型的算数表达式中 规则:在这种情况下最宽的数据类型成为目标转 ...

  7. 存在继承关系的Java类对象之间的类型转换(一)

      类似于基本数据类型之间的强制类型转换. 存在继承关系的父类对象和子类对象之间也可以 在一定条件之下相互转换. 这种转换需要遵守以下原则: 1.子类对象可以被视为是其父类的一个对象2.父类对象不能被 ...

  8. jquery对象与dom对象之间互相转换的方法

    本文主要讲述jquery对象和js里的dom对象之间互相转换的方法,使jquery对象可以直接使用js里的方法,或js里的dom对象使用jquery里的方法. jquery对象和dom对象是不一样的, ...

  9. JavaScript中各种对象之间的关系

    上图: 此外,补充一下图中用到的概念: 1.内置(Build-in)对象与原生(Naitve)对象的区别在于:前者总是在引擎初始化阶段就被创建好的对象,是后者的一个子集:而后者包括了一些在运行过程中动 ...

随机推荐

  1. http头部 Expect

    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/90 在通过curl调用对方接口时,发现超时现象很严重,于是询问对 ...

  2. bzoj 2588 Count on a tree

    Description 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点权.其中lastans是上一个询问的答案,初始 ...

  3. lesson - 11 课程笔记

    一.sed  作用: sed 是一种流编辑器,它是文本处理中非常重要的工具, 能够完美的配合正则表达式使用.处理时,把当前处理的行存储在临时缓冲区中, 称为“模式空间(pattern space)”, ...

  4. SSIS 实用表达式部分总结

    下面,列出一些实用的表达式: 1,路径取文件名 RIGHT([FilePath],FINDSTRING(REVERSE([FilePath]),) - ) RIGHT(@[User::FilePath ...

  5. rsync服务器的搭建

    Rsync(remote synchronize)是一个远程数据同步工具,简要的概括就是主机于主机之间的文件目录数据的一个同步.下面就是rsync服务器的搭建过程.    系统环境 平台:Centos ...

  6. css实现多行文本溢出显示省略号(…)全攻略

    省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...

  7. 关于md5的使用方法

    本周工作,学习中用到了,md5. 在我们需要用到md5密码的时候,可以使用: System.Web.Security.FormsAuthentication.HashPasswordForStorin ...

  8. Robot Framework学习笔记(九)------创建资源和用户关键字

    一.测试套件下创建用户关键字 1.创建关键字测试套件右击->点击new user keyword,然后输入name,点击OK保存. 2.在用户关键字的edit点击settings,然后输入Arg ...

  9. .Net 如何模拟会话级别的信号量,对http接口调用频率进行限制(有demo)

    现在,因为种种因素,你必须对一个请求或者方法进行频率上的访问限制. 比如, 你对外提供了一个API接口,注册用户每秒钟最多可以调用100次,非注册用户每秒钟最多可以调用10次. 比如, 有一个非常吃服 ...

  10. 【转】Appium的安装-Mac平台(命令行 dmg)

    其实Appium的安装方式主要有两种: 1)自己安装配置nodejs的环境,然后通过npm进行appium的安装 2)直接下载官网提供的dmg进行安装,dmg里面已经有nodejs的环境和appium ...