来源 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的更多相关文章

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

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

  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. 关于swap函数传值的问题

    #include <stdio.h> void swap(int * p3,int * p4); int main() {  int a = 9;  int b = 8;  int * p ...

  2. 远程连接服务器for Linux

    远程连接Linux云服务器-命令行模式 1.远程连接工具.目前Linux远程连接工具有很多种,您可以选择顺手的工具使用.下面使用的是名为Putty的Linux远程连接工具.该工具是免费的,且不需要安装 ...

  3. ubuntu与登录有关的log配置信息

    1. 所有sudo, sshd, sftp登录的信息都在auth.log中. 2. pam的配置是在/etc/pam.conf与/etc/pam.d中,在文件夹pam.d对cron, sudo,ssh ...

  4. LeetCode Find All Duplicates in an Array

    原题链接在这里:https://leetcode.com/problems/find-all-duplicates-in-an-array/ 题目: Given an array of integer ...

  5. SpringMVC常用配置-Controller中的各种配置(基于Java API和注解)

  6. Python之路----------shutil模块

    高级的文件.文件夹.压缩包 处理模块 复制文件: import shutil f1 = open('test') f2 = open('test2','w') shutil.copyfileobj(f ...

  7. Lua参数绑定函数实现方法

    背景 对于某一个函数, 其被调用多次, 每次调用的入参都是一致的. 不想每次都填写参数, 如果能够定义一个新的函数, 将参数跟此函数绑定就棒哒哒了. local function pirntfunc( ...

  8. Computop支付网关(一) credit Card

    1.界面没有中文,只能选择英文 sp – Spanish; en – English; ca – Catalan; fr – French; de – German; du – Dutch; it – ...

  9. C语言第五次作业

    #include<stdio.h> int main() { int a,b,c; printf("请输入3个整数:"); scanf("%d %d %d&q ...

  10. Windows XP 新增API函数列表

    SetFileShortNameConvertFiberTothreadCreateFiberExDuplicateEncryptionInfoFileEnumGeoInfoProcEnumSyste ...