【canvas】 使用canvas压缩图片大小
------------恢复内容开始------------
由于各种大大小小的原因,自己最近经历了一些面试,其中有一个面试题是这样的,使用canvas怎样压缩图片大小
这道题给我问蒙了,因为我没用过canvas压缩图片
回去查资料,发现手机端在上传图片的时候,调起相机拍照的时候超过2m了,所以用到canvas压缩,优化用户体验
解决方法:
1. 将图片的file文件转成baseURL
2. 创建一个image表情去接受文件获取图片的宽高和比例。
3. 创建canvas画布设置画布的大小。
4. 将图片绘制到canvas上面。
5. 对canvas进行压缩处理,获取新的baseURL
6. 将baseURL转化回文件
1.
/** * @param {二进制文件流} file * @param {回调函数,返回base64} fn */ function changeFileToBaseURL(file,fn){ // 创建读取文件对象 var fileReader = new FileReader(); //如果file没定义返回null if(file == undefined) return fn(null); // 读取file文件,得到的结果为base64位 fileReader.readAsDataURL(file); fileReader.onload = function(){ // 把读取到的base64 var imgBase64Data = this.result; fn(imgBase64Data); } }2./** * 将base64转换为文件 * @param {baseURL} dataurl * @param {文件名称} filename * @return {文件二进制流} */ function dataURLtoFile(dataurl, filename) { var arr = dataurl.split(‘,‘), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], filename, {type:mime}); }3./** * canvas压缩图片 * @param {参数obj} param * @param {文件二进制流} param.file 必传 * @param {目标压缩大小} param.targetSize 不传初始赋值-1 * @param {输出图片宽度} param.width 不传初始赋值-1,等比缩放不用传高度 * @param {输出图片名称} param.fileName 不传初始赋值image * @param {压缩图片程度} param.quality 不传初始赋值0.92。值范围0~1 * @param {回调函数} param.succ 必传 */ function pressImg(param){ //如果没有回调函数就不执行 if(param && param.succ){ //如果file没定义返回null if(param.file == undefined) return param.succ(null); //给参数附初始值 param.targetSize = param.hasOwnProperty("targetSize") ? param.targetSize : -1; param.width = param.hasOwnProperty("width") ? param.width : -1; param.fileName = param.hasOwnProperty("fileName") ? param.fileName: "image"; param.quality = param.hasOwnProperty("quality") ? param.quality : 0.92; var _this = this; // 得到文件类型 var fileType = param.file.type; // console.log(fileType) //image/jpeg if(fileType.indexOf("image") == -1){ console.log(‘请选择图片文件^_^‘); return param.succ(null); } //如果当前size比目标size小,直接输出 var size = param.file.size; if(param.targetSize > size){ return param.succ(param.file); } // 读取file文件,得到的结果为base64位 changeFileToBaseURL(param.file,function(base64){ if(base64){ var image = new Image(); image.src = base64; image.onload = function(){ // 获得长宽比例 var scale = this.width / this.height; // console.log(scale); //创建一个canvas var canvas = document.createElement(‘canvas‘); //获取上下文 var context = canvas.getContext(‘2d‘); //获取压缩后的图片宽度,如果width为-1,默认原图宽度 canvas.width = param.width == -1 ? this.width : param.width; //获取压缩后的图片高度,如果width为-1,默认原图高度 canvas.height = param.width == -1 ? this.height : parseInt(param.width / scale); //把图片绘制到canvas上面 context.drawImage(image, 0, 0, canvas.width, canvas.height); //压缩图片,获取到新的base64Url var newImageData = canvas.toDataURL(fileType,param.quality
相关推荐
northwindx 2020-05-31
大地飞鸿 2020-11-12
星星有所不知 2020-10-12
jinxiutong 2020-07-26
MIKUScallion 2020-07-05
songfens 2020-07-05
songfens 2020-06-11
songfens 2020-06-08
northwindx 2020-05-31
northwindx 2020-05-27
northwindx 2020-05-25
MIKUScallion 2020-05-25
jinxiutong 2020-05-10
xdyangxiaoromg 2020-05-10
大地飞鸿 2020-05-06
northwindx 2020-04-25