函数都比较简单,直接看就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. 项目Alpha冲刺——测试

    作业描述 课程: 软件工程1916|W(福州大学) 作业要求: 项目Alpha冲刺(团队) 团队名称: 火鸡堂 作业目标: 完成项目Alpha冲刺 团队信息 队名:火鸡堂 队员学号 队员姓名 博客地址 ...

  2. 接口&调用接口

    接口: /** * 分页查询 * @param request * @param pageable * @return */ @GetMapping("/query-baseProductB ...

  3. JS判断某变量是否为某数组中的一个值的3种方法

    1.正则表达式 js 中判断某个元素是否存在于某个 js 数组中,相当于 PHP 语言中的 in_array 函数. 1 Array.prototype.in_array = function (e) ...

  4. Partition HDU - 4602 (不知道为什么被放在了FFT的题单里)

    题目链接:Vjudge 传送门 相当于把nnn个点分隔为若干块,求所有方案中大小为kkk的块数量 我们把大小为kkk的块,即使在同一种分隔方案中的块 单独考虑,它可能出现的位置是在nnn个点的首.尾. ...

  5. Oracle EXPDP导出数据

    Oracle expdp导出表数据(带条件): expdp student/123456@orcl dumpfile=student_1.dmp logfile=student_1.log table ...

  6. Jmeter扩展自定义函数

    步骤1.导入lib\ext下ApacheJMeter_core.jar和ApacheJMeter_functions.jar 步骤2.新建function的类的package声明必须已".f ...

  7. Windbg命令的语法规则系列(二)

    二.字符串通配符语法 一些调试器命令具有接受各种通配符的字符串参数.这些类型的参数支持以下语法功能: 星号(*)表示零个或多个字符. 问号(?)表示任何单个字符. 包含字符列表的括号([])表示列表中 ...

  8. 【JZOJ6226】【20190618】纳什均衡

    题目 一颗二叉树,每个点儿子个数为0 或 2 ,对每个叶子有一个权值\((c(u),d(u))\) 从根结点开始走,Alice 可以选择奇数层的走法,Bob 可以选择偶数层的走法,分别获得最后走到叶子 ...

  9. 解决IE报错[vue router]Failed to resolve async component default:strict 模式下不允许分配到只读属性

    之前遇到过一个奇怪的问题,在其他浏览器下一切正常,但在万恶的IE下,却一直不行. 具体问题场景就是:比如orderDetail页面出现问题,那么只要是路由跳转的,点第1次无法跳转,必须得点第2次才可以 ...

  10. (8)Go Map

    Go语言中提供的映射关系容器为map,其内部使用散列表(hash)实现. Map map是一种无序的基于key-value的数据结构,Go语言中的map是引用类型,必须初始化才能使用. map定义 G ...