JS实现图片压缩，兼容ios，

代码参考的七牛官方compress.js(https://github.com/qiniu/js-sdk/blob/master/src/compress.js)

但是七牛官方的压缩，在ios下我试着是有问题的，压缩完后，图片只显示一小截，然后大片空白，

于是参考他们的代码，重新写了一下，也精简了一下，测试ios下也正常了。

其中七牛的下面这段代码我没看懂，所以就跳过了，在我的代码里没有处理，但我也怀疑就是下面这段代码让该插件在ios下出现问题。

下面是我的代码：

HTML:

<body><input type="file" name="" onchange="upload(this.files[0])" id="" /><img src="" alt="" id="img" style="width:400px; "/>
</body>

JS: 依赖 exis.js 需要自己下载

<script src="wechat/assets/js/exif.js"></script>
<script>
/*** 压缩类* 构造函数，需要传两个参数* 一个是file，要压缩的图片文件* 另一个是压缩参数{maxWidth:压缩后最大宽度，maxHeight:压缩后最大高度，quality:压缩质量，取值0-1}*/
class Compress{constructor(file, option){this.file = file;this.config = Object.assign({quality : 0.9},option);return this.process();}//支持压缩的格式get mimeTypes()  {return {PNG : "image/png",JPEG : "image/jpeg",WEBP : "image/webp",BMP : "image/bmp"   }};get supportTypes(){return Object.keys(this.mimeTypes).map(type => this.mimeTypes[type]);}//判断格式是否支持isSupportedType (type){return this.supportTypes.includes(type);}process(){this.outputType = this.file.type;if(this.isSupportedType(this.file.type) == false){return Promise.reject(new Error("不支持该文件类型"));}return this.getOriginImage().then(img => {return this.getCanvas(img);}).then(canvas => {let scale = 1;if(this.config.maxWidth){scale = Math.min(1, this.config.maxWidth / canvas.width);}if(this.config.maxHeight){scale = Math.min(1, scale, this.config.maxHeight / canvas.height);}return this.doScale(canvas, scale);}).then(result => {return new Promise((resolve, reject) => {resolve(this.toBlob(result));})})}//通过file 初始化 imagegetOriginImage() {return new Promise((resolve, reject) => {let img = new Image();img.onload = () => {resolve(img);};img.onerror = () => {reject("图片加载失败");};img.src = URL.createObjectURL(this.file);})}getCanvas(img) {return new Promise((resolve, reject) => {// 通过得到图片的信息来调整显示方向以正确显示图片，主要解决 ios 系统上的图片会有旋转的问题EXIF.getData(img, () => {let orientation = EXIF.getTag(img, "Orientation") || 1;let canvas = document.createElement("canvas");let ctx = canvas.getContext("2d");if(orientation == 6){canvas.width = img.height;canvas.height = img.width;ctx.rotate(90 * Math.PI / 180);ctx.drawImage(img, 0 , 0 , img.width, img.height, 0, -img.height ,canvas.height,canvas.width);}else{canvas.width = img.width;canvas.height = img.height;ctx.drawImage(img, 0, 0);}resolve(canvas);});})}doScale(source, scale){if(scale == 1){return Promise.resolve(source);}let mirror = document.createElement("canvas");mirror.width = Math.ceil(source.width * scale);mirror.height = Math.ceil(source.height * scale);let mctx = mirror.getContext("2d");mctx.drawImage(source, 0, 0, source.width, source.height, 0, 0, mirror.width, mirror.height);return Promise.resolve(mirror);}// 这里把 base64 字符串转为 blob 对象toBlob(result) {let dataURL = result.toDataURL(this.outputType, this.config.quality);let buffer = atob(dataURL.split(",")[1]).split("").map(char => char.charCodeAt(0));let blob = new Blob([ new Uint8Array(buffer) ], {type : this.outputType});return {blob: blob,url: dataURL};}}/*** 示例代码*/
function upload(file){new Compress(file,{maxWidth:1000, maxHeight:1000, quality: 0.7}).then(function(data){//这里写回调函数，data会传入两个属性，url:压缩后图片url，blob：压缩后图片blob值document.getElementById("img").src = data.url;},function(err){//这里写异常处理console.log(err);})}
</script>

实测 1.5M 的3000*4000分辨率图片按照上面代码压缩后 50K，

另外七牛源代码还提供了特殊情况处理，如果压缩后图片体积比原来还大，就返回原图片，这些我都没处理

JS实现图片压缩，兼容ios，相关推荐

谈谈JS 的图片压缩
前言说起图片压缩,大家想到的或者平时用到的很多工具都可以实现,例如,客户端类的有图片压缩工具 PPDuck3, JS 实现类的有插件 compression.js ,亦或是在线处理类的 OSS 上传 ...
JS前端图片压缩上传
JS前端图片压缩上传重点知识最近在做一个手机端的图片上传,写了一个比较符合自己要求的方法,可供参考在做这个功能模块时,我遇到了以下问题,都花费了大量时间: 1. 不知道怎么压缩图片,(代码和方法) ...
java jpeg压缩解码_图片压缩（iOS）
场景很简单,上传图片前压缩图片,节省流量和发图时间.最近看了看 iOS 的静态图片压缩,这里记个笔记.本人之前没学过 iOS 和 Swift,本文是一篇入门文章,描述不到位之处请大家多多批评斧正.￣ω ...
iOS代码质量要求_图片压缩（iOS）
场景很简单,上传图片前压缩图片,节省流量和发图时间.最近看了看 iOS 的静态图片压缩,这里记个笔记.本人之前没学过 iOS 和 Swift,本文是一篇入门文章,描述不到位之处请大家多多批评斧正.￣ω ...
浅谈移动端图片压缩（iOS Android）
在 App 中,如果分享.发布.上传功能涉及到图片,必不可少会对图片进行一定程度的压缩.笔者最近在公司项目中恰好重构了双端(iOS&Android)的图片压缩模块.本文会非常基础的讲解一些图片 ...
使用node.js实现图片压缩
1 images模块介绍处理图片往往会遇到图片压缩的问题,使用Windows系统自带的画图软件或者其它图像处理软件一般都能够实现图片的压缩,但是只能是单张处理,如果涉及到大批量的图片压缩的话,一张一 ...
使用js将图片压缩到指定大小
可以使用 JavaScript 库或框架来实现图片压缩功能. 例如可以使用 "canvas" 元素和 "FileReader" 对象来实现图片压缩. 以下是一个 ...
微信开发h5图片上传（拍照、图片压缩、IOS照片旋转)
微信开发h5图片上传开发环境 vue.js,原生h5 input file, 微信公众号网页依赖安装 exif-js:IOS下拍照照片的方向有问题, 需要exif-js来读取照片信息进行旋转处理: ...
lrz实现原理_利用lrz.bundle.js实现图片压缩上传
html部分: js部分: 下载 //图片上传压缩方法 function compressImg(fileDom,form,callback){ var that = fileDom; lrz(tha ...

JS实现图片压缩，兼容ios，

JS实现图片压缩，兼容ios，相关推荐

最新文章

热门文章