canvas压缩图片方法

因为最近项目需要实现一个图片组件，包含压缩，拖拽上传，复制上传，图片裁剪，兼容多图和单图上传功能，好像这类组件也比较少，所以自己就封装了一个，连带着相关知识也熟悉了。这里分开几篇写，下面先说一下图片压缩。

关于图片压缩好像有不少方法，这里我选了一种我认为比较好的方法，也就是很多图片插件里用到的canvas截图方法，原理就是将图片渲染到canvas上，再将canvas截取成一张图片。这里我单独写了两个方法，和其他部分完全解耦，基本上大家复制下来就能用,下面是代码，每一步都做了解释,有不明白的可以问我。

  //下面是压缩的主要方法，因为内部有异步操作所以返回一个Promise,当压缩成功可以then内可以返回一个压缩后的blob对象，方便上传//使用compressionImg（）.then((file)=> {let file = file})function compressionImg(file，size) {return new Promise((resolve,reject)=> {//文件大于size进行压缩，小于size直接返回 你可以用一个变量动态控制if(file.size/1024/1024 > size) { //创建一个空的图片对象let image = new Image()//读取客户端上的文件let reader = new FileReader(); //创建一个canvaslet canvas = document.createElement('canvas')  //返回一个用于在画布上绘图的环境let ctx = canvas.getContext('2d')//用文件读取对象进行读取reader.readAsDataURL(file)//读取完成后监听reader.onload = (e)=> {let url = e.target.result;//读取到的文件内容image.src= url;//reader读取的文件内容是base64,利用这个url就能实现上传前预览图片};image.onload = ()=> {let w = image.naturalWidthlet h = image.naturalHeightcanvas.width = w;canvas.height = h;ctx.drawImage(image, 0, 0, w, h, 0, 0, w, h); 将图片绘制到canvas上这里大小就是图片大小let value = canvas.toDataURL('image/jpeg', 0.3);//将绘制的canvans再转成base64的url 这个0.3是你要压缩的比例，不要太小会很模糊，也不要太大会很卡let f = this.convertBase64UrlToBlob(value) //将base64的url再转成文件格式return  resolve(f)}}else {return  resolve(file)}})},
//下面这个方法是将base64格式的url转成blob对象方便上传
function convertBase64UrlToBlob(urlData) { //将Base64转成Bloblet bytes = window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte//处理异常,将ascii码小于0的转换为大于0let ab = new ArrayBuffer(bytes.length);let ia = new Uint8Array(ab);for (let i = 0; i < bytes.length; i++) {ia[i] = bytes.charCodeAt(i);}return new Blob([ab], {type: 'image/jpeg'});},

canvas压缩图片方法相关推荐

android h5 多图上传源码,JS移动端/H5同时选择多张图片上传并使用canvas压缩图片...
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...
JavaScript 使用canvas压缩图片
压缩思路 JS 的图片压缩,一般是需要用到 Canvas 的绘图能力,通过调整图片的分辨率或者绘图质量来达到图片压缩的效果. 实现过程 (1)获取上传 Input 中的图片对象 File: (2)将图 ...
canvas压缩图片或者进行视频抓拍
最近在项目中遇到一个需要抓拍正在播放的视频中的图片,就像截图一样进行实时抓拍,并且使用了base64进行上传,要求图片不能大于2M. 先上代码 public captureVideo(id) {//获 ...
canvas压缩图片的秘密
开篇首先明确canvas只适合压缩大的图片,图片size过小并不能有什么用处.那么为什么size过小canvas并不能压缩呢如果不压缩质量,经过canvas的图片变大了图片在经过img标签的时候 ...
怎么用手机压缩图片？教给大家三种手机压缩图片方法
如何使用手机把图片的内存进行压缩呢?大家在使用照片的时候,如果照片的内存太大,不仅会占用手机的内存,也会影响一些网站上传图片的操作,因为图片内存太大很多都是上传不了的,为了解决这一问题我们可以将图片进 ...
canvas下载图片方法
有个需求说要把网站上的图表可以保存到本地,查看了一下表单的元素,是canvas内的. 用了好多种方法,都失败了.最后搜到了stackoverflow上的一种方法成功导出,代码贴在下面 //canvas ...
使用html5+的plus调起相机拍照，使用canvas压缩图片，转成base64传到后台
html代码: <div class="form-com door"><label for="">门头照:</label>& ...
canvas 压缩图片上传
问题:前端开发过程中难免会将数据提交到后台,但若是提交的数据过大,特别上传图片这类需求,如果不对上传的图片进行压缩处理,就难免会出现请求时间过长的情况,对于用户体验肯定就不是太友好,那么这时候该如何将 ...
微信小程序新版canvas绘制图片方法
今天在做项目使用到了canvas绘制二维码,发现以前的方法被弃用了. wxml: <canvas type="2d" id="myCanvas" styl ...
微信小程序新版canvas绘制图片方法
截至2022.12.23 修改日微信小程序开发文档介绍不全,导致很多用户绘制图片不显示或失败,因此写下截至目前的可行方案 <canvas type="2d" id=&quo ...

canvas压缩图片方法

canvas压缩图片方法

canvas压缩图片方法相关推荐

最新文章

热门文章