Blob/DataURL/canvas/image的相互转换
函数都比较简单,直接看就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的相互转换的更多相关文章
- 在浏览器端用H5实现图片压缩上传
一.需求的场景: 在我们的需求中需要有一个在手机浏览器端,用户实现上传证件照片的功能,我们第一版上了一个最简版,直接让用户在本地选择图片,然后上传到公司公共的服务器上. 功能实现后我们发现一个问题,公 ...
- [转]DataURL与File,Blob,canvas对象之间的互相转换的Javascript
来源 http://blog.csdn.net/cuixiping/article/details/45932793 canvas转换为dataURL (从canvas获取dataURL) var d ...
- DataURL与File,Blob,canvas对象之间的互相转换的Javascript
canvas转换为dataURL (从canvas获取dataURL) var dataurl = canvas.toDataURL('image/png'); var dataurl2 = canv ...
- blob canvas img dataUrl的互相转换和用处
blob:代表了一段二进制数据 初始化:var blob = new Blob(array,option)//其中array里面可以包含任意类型对象,option指数据类型如array是['<h ...
- DataURL与File,Blob,canvas对象之间的互相转换的Javascript (未完)
canvas转换为dataURL (从canvas获取dataURL) var dataurl = canvas.toDataURL('image/png'); var dataurl2 = canv ...
- 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 ...
- canvas转img,blob相互转换
摘自:https://www.cnblogs.com/jyuf/p/7251591.html 函数都比较简单,直接看就ok了 /*----------------------------------- ...
- Canvas转换为Blob对象并使用Ajax发送
Canvas转换为Blob对象并使用Ajax发送 转换为Blob对象后,可以使用Ajax上传图像文件. 先从canvas获取dataurl, 再将dataurl转换为Blob对象 var dataur ...
- js canvas获取图片base64 dataUrl
function getImgBase64(path, callback) { var img = new Image(); img.src = path; //图片加载完成后触发 img.onloa ...
随机推荐
- manjaro中微信不能输入中文及微信窗口出现透明轮廓的问题
一.在安装deepin-wine-wechat后,无法切换成中文输入法.网上查找资料,在配置中添加 export 等 均未成功. 后来在官方(https://aur.archlinux.org/pac ...
- 【笔记】MAML-模型无关元学习算法
目录 论文信息: Finn C, Abbeel P, Levine S. Model-agnostic meta-learning for fast adaptation of deep networ ...
- PHP中$_SERVER全局变量的使用
<!DOCTYPE html> <html> <body> <?php echo $_SERVER['PHP_SELF']; echo "<b ...
- 面试必备技能:HashMap哪些技术点会被经常问到?
1.为什么用数组+链表? 数组是用来确定桶的位置,利用元素的key的hash值对数组长度取模得到. 链表是用来解决hash冲突问题,当出现hash值一样的情形,就在数组上的对应位置形成一条链表.ps: ...
- danci
plain 英 [pleɪn] 美 [plen] adj. 平的:简单的:朴素的:清晰的 n. 平原:无格式:朴实无华的东西 adv. 清楚地:平易地 n. (Plain)人名:(英)普莱恩:(法)普 ...
- tensorflow 2.0 学习(四)
这次的mnist学习加入了测试集,看看学习的准确率,代码如下 # encoding: utf-8 import tensorflow as tf import matplotlib.pyplot as ...
- Windbg命令脚本流程控制语句详解
在Windbg命令脚本一文里,我们介绍了命令脚本语言的的组成要素,在本文里将对语句进行展开的讲解.这些语句主要是流程控制的语句,比如我们常见的条件分子和循环语句等. ; (命令分隔符) 分号(:)字符 ...
- JavaScript高级程序编程(三)
2017-06-24 更新 北京连续三天下雨啦 乘性操作符 1.ECMA中定义了三种操作符,乘法 除法 和求模 并与其他语言相应操作符相同,再计算之前如果不是数值,会先去调用number()方法转 ...
- .bat批处理命令之设置关机倒计时脚本
@ECHO off REM 不显示后续命令行及当前命令行 TITLE Shutdown countdown REM 设置脚本标题 COLOR 0A REM 设置脚本 背景色为黑色 前景色为淡绿色 :s ...
- 缺陷描述(Description)
[tips1] 缺陷报告的用途在于: 记录bug 对bug进行分类(发现者.日期.版本.模块.严重程度.优先级) 跟踪bug(new-open-fixed-closed) 对bug进行统计分析.总结 ...