前端js实现Blob、DataURL、canvas、image的相互转换

更新日期: 2019-04-13阅读: 6.3k标签: blob

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;
}


链接: https://fly63.com/article/detial/2859

html5中二进制对象Blob的使用——Blob与ArrayBuffer、TypeArray和String的相互转换

html5中Blob是什么?js如何创建Blob对象?Blob类型转换:String转换成Blob对象、TypeArray转换成 Blob对象 、ArrayBuffer转Blob、将Blob对象转换成String字符串,使用FileReader的readAsText方法 、将Blob对象转换成ArrayBuffer

原生JS上传图片接收服务器端图片并且显示图片(主要描述blob类型)

图片以独立文件的形式存储在服务器的指定文件夹中,再将路径存入数据库字段中;将图片转换成blob,直接存储到数据库的 Image 类型字段中(这种方式负担很大不建议使用)

js blob流和base64,以及file和base64的相互转换

file文件转换为base64,得到base64格式图片;base64转换为file;base64转换为blob流;blob流转换为base64;测试案例,可直接复制运行

通过Blob实现文件下载

最近遇到一个需求,需要将页面中的配置信息下载下来供用户方便使用,以前这个场景的需求有时候会放到后端处理,然后给返回一个下载链接。其实并不需要这么麻烦,这样既增大了服务器的负载

ArrayBuffer 和 Blob 对象

ArrayBuffer 对象与 Blob 对象大家或许不太陌生,常见于文件上传操作处理(如处理图片上传预览等问题)。那么本文将与大家深入介绍两者。ArrayBuffer 对象是 ES6 才纳入正式 ECMAScript 规范

你不知道的 Blob

Blob(Binary Large Object)表示二进制类型的大对象。在数据库管理系统中,将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!