zoukankan      html  css  js  c++  java
  • canvas转img,blob相互转换

    摘自:https://www.cnblogs.com/jyuf/p/7251591.html

    函数都比较简单,直接看就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;
    }
    /*-----------------------------------------------------------------------*/
  • 相关阅读:
    苹果所有常用证书,appID,Provisioning Profiles配置说明及制作图文教程(精)
    使用tcpdump抓取HTTP包
    android保持在休眠时,后台程序继续运行(让程序获取设备电源锁)
    insert数据时,获取插入数据的id
    Android学习笔记(五五):通知Notification(下)
    apk反编译与android项目代码混淆
    android 解决横竖屏切换时重新载入的问题
    android中往字符串数组动态添加元素
    error 25015安装程序集“C:WindowsMicrosoft .NETFrameworkv2.0.50727xxx.dll”失败,原因是出现了系统错误:另一个程序正在使用此文件,进程无法访问
    win7 安装vs2013后无法连接远程数据库,出现如下提示的解决方法
  • 原文地址:https://www.cnblogs.com/yangweilihui/p/10700325.html
Copyright © 2011-2022 走看看