H5js前端压缩图片

1.压缩图片是通过canvas做到的。

具体原理【1】先获取图片的原始尺寸【2】确定压缩后的图片尺寸，（就是将图片尺寸都缩小达到压缩目的）【3】在canvas画布上重新画一遍这个缩小后尺寸的图片【4】把该图片转为blob格式进行发送或者其他进一步的处理。其中successF为成功后的回调函数。该方法是在uni-app中用的，所以先用的uni.getImageInfo获取原本的图片尺寸。这里需要注意的是，如果没有采用ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);这一步重画图片，直接到把canvas转为blob格式，会出现图片是全黑色的。必须通过drawImage方法重新绘制图片，才能得到压缩后的图片信息。

代码如下

xport function handleImage(src,type,successF){uni.getImageInfo({src: src,success: function (res) {let canvasWidth = res.width //图片原始长宽let canvasHeight = res.height;let base = canvasWidth/canvasHeight;if(canvasWidth>500){canvasWidth = 500;canvasHeight = Math.floor(canvasWidth/base);}//进行压缩let canvas = document.createElement('canvas');let ctx = canvas.getContext('2d');canvas.width = canvasWidth;canvas.height = canvasHeight;let img = new Image();img.src = src; // 要压缩的图片  //重画这个图片ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);//转为blob格式发送canvas.toBlob( function(blob) {const blobUrl = URL.createObjectURL(blob)console.log("压缩后的bloburl:"+blobUrl)successF(blobUrl)}, 'image/jpeg');},fail: (err) => {reject('获取图片信息失败')}})
}

H5js前端压缩图片相关推荐

vue：前端压缩图片上传
网上关于vue前端压缩图片后再上传到的代码很多,大家可以一试~ compressImage.js文件 // 压缩图片 export function compressImage({ file, con ...
前端压缩图片 -- vue项目使用localResizeIMG插件 -- 实例
前端压缩图片 -- vue项目使用localResizeIMG插件 -- 实例本博没有新的东西, 都是东拼西凑的. 但是, 组合出了个宝贝, 包括: 文件类型/宽高/大小的校验, 还有展示图片参照 ...
使用squoosh网的压缩方法实现浏览器前端压缩图片功能
假如说你做的网站有需要用户自定义上传图片的功能,那么往往这些图片,都需要进行压缩,且往往是需要经过服务器端压缩的.同时如果说你不懂图片压缩原理的话,你还得去花钱使用他人的API进行图片压缩(例如tin ...
前端压缩图片 tinypng
前端写页面,很多时候会引入大量的图片,网页打开的时候加载速度就会成为一个问题, 尤其是在目前的移动端(未来网速大幅提升的情况下会好很多),现在这样的情况下压缩图片是很好的选择,可以加快网页打开的速度 ...
HTML实现纯前端压缩图片
演示 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8&q ...
前端压缩图片，前端压缩图片后转换为base64.
今天利用一上午研究了一下前端如何将5m左右的照片转换base64大小为 100k以内! 有两个链接:https://www.cnblogs.com/007sx/p/7583202.html :http ...
前端实现压缩图片的功能（vue-element）
前言: 随着现在手机像素,拍照功能越来越好,随之而来的是本地图片越来越大,那么如何更好的将本地图片上传到后端接口呢?这是后台管理系统常见的场景和头疼的问题,这里分享下个人的方法. 实现效果: 如下图所 ...
前端JS图片压缩处理
2020-10 分享近期工作遇到了用户上传图片由前端压缩图片大小,再传到OSS.这样可以减少用户上行传输的数据量,减少用上传的等待时长,优化用户体验. 方案:利用js现成canvas. Canvas ...
前端获取图片压缩后上传给后台
在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上 ...
掌握JS压缩图片，这一篇就够了
前言公司的移动端业务需要在用户上传图片是由前端压缩图片大小,再上传到服务器,这样可以减少移动端上行流量,减少用户上传等待时长,优化用户体验. 插播一下,本文案例已整理成插件,已上传 npm ,可通过 ...

H5js前端压缩图片

H5js前端压缩图片相关推荐

最新文章

热门文章