[转]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)对象的区别在于:前者总是在引擎初始化阶段就被创建好的对象,是后者的一个子集:而后者包括了一些在运行过程中动 ...
随机推荐
- 关于swap函数传值的问题
#include <stdio.h> void swap(int * p3,int * p4); int main() { int a = 9; int b = 8; int * p ...
- 远程连接服务器for Linux
远程连接Linux云服务器-命令行模式 1.远程连接工具.目前Linux远程连接工具有很多种,您可以选择顺手的工具使用.下面使用的是名为Putty的Linux远程连接工具.该工具是免费的,且不需要安装 ...
- ubuntu与登录有关的log配置信息
1. 所有sudo, sshd, sftp登录的信息都在auth.log中. 2. pam的配置是在/etc/pam.conf与/etc/pam.d中,在文件夹pam.d对cron, sudo,ssh ...
- LeetCode Find All Duplicates in an Array
原题链接在这里:https://leetcode.com/problems/find-all-duplicates-in-an-array/ 题目: Given an array of integer ...
- SpringMVC常用配置-Controller中的各种配置(基于Java API和注解)
- Python之路----------shutil模块
高级的文件.文件夹.压缩包 处理模块 复制文件: import shutil f1 = open('test') f2 = open('test2','w') shutil.copyfileobj(f ...
- Lua参数绑定函数实现方法
背景 对于某一个函数, 其被调用多次, 每次调用的入参都是一致的. 不想每次都填写参数, 如果能够定义一个新的函数, 将参数跟此函数绑定就棒哒哒了. local function pirntfunc( ...
- Computop支付网关(一) credit Card
1.界面没有中文,只能选择英文 sp – Spanish; en – English; ca – Catalan; fr – French; de – German; du – Dutch; it – ...
- C语言第五次作业
#include<stdio.h> int main() { int a,b,c; printf("请输入3个整数:"); scanf("%d %d %d&q ...
- Windows XP 新增API函数列表
SetFileShortNameConvertFiberTothreadCreateFiberExDuplicateEncryptionInfoFileEnumGeoInfoProcEnumSyste ...