函数都比较简单,直接看就ok了

/*-----------------------------------------------------------------------*/
// canvas转dataURL:canvas对象、转换格式、图像品质
function canvasToDataURL(canvas, format, quality){
return canvas.toDataURL(format||'image/jpeg', quality||1.0);
}
// DataURL转canvas
function dataURLToCanvas(dataurl, cb){
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
cb(canvas);
};
img.src = dataurl;
}
/*-----------------------------------------------------------------------*/
// image转canvas:图片地址
function imageToCanvas(src, cb){
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = src;
img.onload = function (){
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
cb(canvas);
};
}
// canvas转image
function canvasToImage(canvas){
var img = new Image();
img.src = canvas.toDataURL('image/jpeg', 1.0);
return img;
}
/*-----------------------------------------------------------------------*/
// File/Blob对象转DataURL
function fileOrBlobToDataURL(obj, cb){
var a = new FileReader();
a.readAsDataURL(obj);
a.onload = function (e){
cb(e.target.result);
};
}
// DataURL转Blob对象
function dataURLToBlob(dataurl){
var arr = dataurl.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}
/*-----------------------------------------------------------------------*/
// Blob转image
function blobToImage(blob, cb){
fileOrBlobToDataURL(blob, function (dataurl){
var img = new Image();
img.src = dataurl;
cb(img);
});
}
// image转Blob
function imageToBlob(src, cb){
imageToCanvas(src, function (canvas){
cb(dataURLToBlob(canvasToDataURL(canvas)));
});
}
/*-----------------------------------------------------------------------*/
// Blob转canvas
function BlobToCanvas(blob, cb){
fileOrBlobToDataURL(blob, function (dataurl){
dataURLToCanvas(dataurl, cb);
});
}
// canvas转Blob
function canvasToBlob(canvas, cb){
cb(dataURLToBlob(canvasToDataURL(canvas)));
}
/*-----------------------------------------------------------------------*/
// image转dataURL
function imageToDataURL(src, cb){
imageToCanvas(src, function (canvas){
cb(canvasToDataURL(canvas));
});
}
// dataURL转image,这个不需要转,直接给了src就能用
function dataURLToImage(dataurl){
var img = new Image();
img.src = d;
return img;
}
/*-----------------------------------------------------------------------*/

Blob/DataURL/canvas/image的相互转换的更多相关文章

  1. 在浏览器端用H5实现图片压缩上传

    一.需求的场景: 在我们的需求中需要有一个在手机浏览器端,用户实现上传证件照片的功能,我们第一版上了一个最简版,直接让用户在本地选择图片,然后上传到公司公共的服务器上. 功能实现后我们发现一个问题,公 ...

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

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

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

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

  4. blob canvas img dataUrl的互相转换和用处

    blob:代表了一段二进制数据 初始化:var blob = new Blob(array,option)//其中array里面可以包含任意类型对象,option指数据类型如array是['<h ...

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

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

  6. canvas、image src、data url、blob file conversion

    //canvas.toDataURL('image/jpeg'), and convert to blob,blob is a File Object. but UC don't support fu ...

  7. canvas转img,blob相互转换

    摘自:https://www.cnblogs.com/jyuf/p/7251591.html 函数都比较简单,直接看就ok了 /*----------------------------------- ...

  8. Canvas转换为Blob对象并使用Ajax发送

    Canvas转换为Blob对象并使用Ajax发送 转换为Blob对象后,可以使用Ajax上传图像文件. 先从canvas获取dataurl, 再将dataurl转换为Blob对象 var dataur ...

  9. js canvas获取图片base64 dataUrl

    function getImgBase64(path, callback) { var img = new Image(); img.src = path; //图片加载完成后触发 img.onloa ...

随机推荐

  1. A quick introduction to Source Insight for seamless development platform between Linux and Windows

    前言 Source Insight是一个面向项目开发的程序编辑器和代码浏览器,它拥有内置的对C/C++, C#和Java等程序的分析.能分析源代码并在工作的同时动态维护它自己的符号数据库,并自动显示有 ...

  2. sklearn.model_selection 的train_test_split方法和参数

    train_test_split是sklearn中用于划分数据集,即将原始数据集划分成测试集和训练集两部分的函数. from sklearn.model_selection import train_ ...

  3. Python的元编程案例

    Python的元编程案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.什么是元编程 元编程概念来自LISP和smalltalk. 我们写程序是直接写代码,是否能够用代码来生成 ...

  4. scrapy框架爬取糗妹妹网站妹子图分类的所有图片

    爬取所有图片,一个页面的图片建一个文件夹.难点,图片中有不少.gif图片,需要重写下载规则, 创建scrapy项目 scrapy startproject qiumeimei 创建爬虫应用 cd qi ...

  5. windows查看文件MD5值的命令

    今天需要,就记录一下. certutil -hashfile filename MD5 certutil -hashfile filename SHA1 certutil -hashfile file ...

  6. kafka没配置好,导致服务器重启之后,topic丢失,topic里面的消息也丢失

    转,原文:https://blog.csdn.net/zfszhangyuan/article/details/53389916 ----------------------------------- ...

  7. Centos7-安装py3

    安装依赖 yum install gcc openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqlite-devel li ...

  8. CodeForces - 115E:Linear Kingdom Races (DP+线段树+lazy)

    pro: 从左到有有N个车道,都有一定程度损坏,所以有不同的修理费a[]: 有M场比赛,每场比赛的场地是[Li,Ri],即如果这个区间的车道都被修理好,则可以举办这个比赛,并且收益是Pi.问最多得到多 ...

  9. CodeForces - 24D :Broken robot (DP+三对角矩阵高斯消元 随机)

    pro:给定N*M的矩阵,以及初始玩家位置. 规定玩家每次会等概率的向左走,向右走,向下走,原地不动,问走到最后一行的期望.保留4位小数. sol:可以列出方程,高斯消元即可,发现是三角矩阵,O(N* ...

  10. MySQL——时间戳和时间的转化

    前言 Mysql中时间戳和时间的转化 时间转时间戳 select unix_timestamp('2019-7-29 14:23:25'); 时间戳转时间 select from_unixtime(1 ...