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 ...
随机推荐
- Hbase的表结构中rowkey的设计---避免热点问题
热点问题 hbase 中的行是以 rowkey 的字典序排序的,这种设计优化了scan 操作,可以将相关的 行 以及会被一起读取的行 存取在临近位置,便于 scan . 然而,糟糕的 rowkey 设 ...
- 调整DataTable的列顺序
地址:https://www.cnblogs.com/gaocong/p/6490159.html 标题:DataTable 修改列名 删除列 调整列顺序 DataTable myDt =dt; // ...
- SpringBoot启动流程及其原理
Spring Boot.Spring MVC 和 Spring 有什么区别? 分别描述各自的特征: Spring 框架就像一个家族,有众多衍生产品例如 boot.security.jpa等等:但他们的 ...
- sql中如何获取一条数据中所有字段的名称和值
declare ) ) --获取表的列名 ,),filename INTO #templist FROM (select cl.name as filename from sys.tables AS ...
- ElementUI——动态表单验证
前言 版本更新迭代的时候,需要用到一个动态表单的功能,ElementUI刚好有教程就改改用咯 步骤 代码 <!-- 手机副号动态表单框 --> <el-form-item v-for ...
- windows——快速得到某一目录下所有文件的名称
前言 其实用的是windows上dir命令,能快速得到某一目录下的所有文件名称,天天那么忙都没时间写博客(┬_┬) 步骤 打开cmd并cd到某目录下 C:\Users\Administrator.KI ...
- 五大开源 Web 代理服务器横评:Squid、Privoxy、Varnish、Polipo、Tinyproxy
https://linux.cn/article-7119-1.html Web 代理软件转发 HTTP 请求时并不会改变数据流量.它们可以配置成透明代理,而无需客户端配置.它们还可以作为反向代理放在 ...
- OLED液晶屏幕(0)自动获取12ic地址液晶屏幕
. 烧录 串口可以看到输出的地址 #include <Wire.h> void setup(){ Wire.begin(); Serial.begin(9600); Serial.prin ...
- EFK架构图
Environment:{ 三台CentOS7操作系统 (环境均安装jdk) } 需要机器: 消息中间件的机器中 kafka 和 zookeeper 同时安装在三台虚拟机 logstash 960 ...
- Windows10 Faster R-CNN(GPU版) 配置训练自己的模型
参考链接 1. 找到合适自己的版本,下载安装Anaconda 点击跳转下载安装 Anaconda,双击下载好的 .exe 文件安装,只勾选第一个把 conda 添加到 PATH 路径.