plus

plus简介

plus是HTML5+（HTML5 plus）的一个接口

HTML5+是中国HTML5产业联盟的扩展规范，基于HTML5扩展了大量调用设备的能力，使得web语言可以想原生语言一样强大。

使用plus的坑

注意！ 以plus开头的方法都是属于HTML5+环境调用的方法。plus不能在浏览器环境下使用，它必须在手机APP上才能使用，因为它操控的是APP原生功能。

另外！ 我们在使用HTML5+方法之前，必须监听HTML5+环境是否已经加载完毕，加载完成后，才可以使用HTML5+的方法。

document.addEventListener('plusready',function () { // 在这里调用5+ API
},false);

这里拿我的uni-app项目为例

takePhoto() {uni.chooseImage({count: 1, //默认9sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有sourceType: ['camera'],success: res => {uni.previewImage({urls: res.tempFilePaths,});console.log('压缩前图片体积', res.tempFiles[0].size);let path = res.tempFilePaths[0];plus.zip.compressImage({src: path,dst: path,overwrite: true, //是否生成新图片quality: 20, //1-100,1图片最小，100图片最大width: 'auto',height: 'auto'},(result) => {console.log("result: ", result);let imgPathUrl = result.target;let imgPathSize = result.size;console.log('压缩后的体积', imgPathSize);});}});
},

canvas

canvas的方案要复杂许多，个人是参考众多大佬的方案才最终解决。

--------------------- 一年后更新 ---------------------
看这一篇应该是最全面的了，本文算是个人很简陋的解决方案，详细的可以看下方链接：
了解JS压缩图片，这一篇就够了
--------------------- 一年后更新 ---------------------

图片纯前端JS压缩的实现

前端图片压缩上传（压缩篇）：可能是最适合小白的前端图片压缩文章了！

uni-appH5端canvas压缩图片，并保存文件后获取文件路径

自己浅薄的理解就是，先用FileReader把图片转成base64格式；
然后新建canvas画布把图片绘制到画布，此处做了个将图片等比缩小的操作，因为我这边的后端推荐图片宽为1024px，所以我也限制了这个数值，顺便也能把图片缩小；
再用canvas.toDataURL将这个画布转换成base64格式信息图像信息，而且这个方法接受的第二个参数正是图片质量，所以可以将图片质量调低到一定值以达到压缩图片的目的；
得到了这个压缩后图片的base64后，再将base64的信息转换成Blob类文件对象，然后就将其上传即可；

choosePhoto() {uni.chooseImage({count: 1, //默认9sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有sourceType: ['album'], //从相册选择success: res => {this.$refs.popup.close();// uni.previewImage({//     urls: res.tempFilePaths,// });console.log('压缩前图片体积', res.tempFiles[0].size);let reader = new FileReader();reader.readAsDataURL(res.tempFiles[0]);let _this = this;reader.onload = function() {let content = this.result; //图片的src，base64格式let img = new Image();img.src = content;img.onload = function() { //图片加载完毕_this.compressEvent(img, (dataURL) => {_this.uploadImg(dataURL);})}};}});
},
compressEvent(img, callback) {let canvasWidth = img.width //图片原始宽高let canvasHeight = img.height;//图片宽高比let base = canvasWidth / canvasHeight;//宽度最大设为1024if (canvasWidth > 1024) {canvasWidth = 1024;canvasHeight = Math.floor(canvasWidth / base);}//绘制图像到画布let canvas = document.createElement('canvas');let ctx = canvas.getContext("2d");canvas.width = canvasWidth;canvas.height = canvasHeight;ctx.drawImage(img, 0, 0, canvas.width, canvas.height);//将画布转为base64，mimeType类型为image/jpeg，图片质量为0.3let dataURL = canvas.toDataURL("image/jpeg", 0.3);callback ? callback(dataURL) : null; //调用回调函数
},
dataURItoBlob(dataurl) { //dataurl是base64格式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 Blob([u8arr], {type: mime});
},
uploadImg(dataURL) {//将base64转为blob对象let blob = this.dataURItoBlob(dataURL);console.log("blob size: ", blob.size);uni.uploadFile({//此处填文件上传的接口urlurl: 'http://example.com',filePath: dataURL,name: 'file',file: blob,success: (uploadFileRes) => {console.log(uploadFileRes);}});
},

前端图片压缩 - H5Uni-App图片压缩相关推荐

Android图片系列-2.Android App图片压缩、裁剪分析整理
移动端常用的图片格式有PNG和JPEG,目前ios手机和大部分安卓手机拍照生成的图片默认格式都是JPEG.我们开发APP的时候通常使用的是PNG,这可能是考虑到图片质量效果.PNG图片是无损压缩格式, ...
前端图片压缩上传（压缩篇）
为什么说这是一篇比较适合小白的前端图片压缩文章呢?因为我也是一个刚工作半年的前端小白,最近接到了一个前端图片压缩上传的任务,通过各种百度博客完成了这项任务,但是任务完成后对各种技术细节却还不是特别理解 ...
Python图片格式转换，图片压缩
PyQt 图片格式转换,图片压缩界面展示 # -*- coding: utf-8 -*- import osfrom PIL import Image from PIL.ImageFile impo ...
【转】c# 图片压缩（非图片大小变化）----使得显示效果差点，但是图片占用空间需要变小
转自:http://bbs.csdn.net/topics/270043488 c# 图片压缩 (非图片大小变化)----使得显示效果差点,但是图片占用空间需要变小. [问题点数:60分,结帖人lin ...
Java图片压缩及解决遇到压缩时出现黑底的问题
在项目中有个需求是将图片和其他文件合并,最后输出为一个文件,我在大佬们的帮助下找到合适的压缩工具类来实现压缩,并做如下总结: 方案一 package com.example.cn.service;im ...
React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)
本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包括Babel.热更新等) ----2017 ...
Bmob+Luban（鲁班）压缩图片实现相册选择图片压缩后上传到Bmob后台Glide加载图片显示到本地
源代码已上传CSDN:https://download.csdn.net/download/qq_16519957/11068345 因为本章需要跟前面的知识结合起来看所以就做了一个前面链接方便大家查 ...
图片上传，图片压缩大小
做项目的时候上传总是避免不了,如果上传的图片过大,占用空间会大,前端在进行加载展示的时候耗时也会长压缩大小分为很多种:剪裁图片,等比缩放,降低质量等- 个人感觉,降低图片质量和之前差别不大,如果图片 ...
html5 等比压缩图片,HTML5实现input：file上传压缩，等比压缩图片、base64和文件互相转换...
本文实例为你们分享了Vue2.0实现调用摄像头进行拍照功能的具体代码,以及图片上传功能引用exif.js,供你们参考,具体内容以下javascript 插件:html 1.jquery.min.jsv ...
动态图片怎么压缩？如何在线压缩gif动图大小？
我们在平时的聊天当中使用的表情包一般就是GIF动图,由于GIF动图的体积往往都比较大,因此经常会遇到太大无法上传使用的情况,那么有什么方达能够快速压缩gif动图大小吗?今天来给大家分享一款动图在线压缩 ...

前端图片压缩 - H5Uni-App图片压缩

前端图片压缩

plus

plus简介

使用plus的坑

canvas

前端图片压缩 - H5Uni-App图片压缩相关推荐

最新文章

热门文章