//选择图片
chooseImage(){
let that =this
uni.chooseImage({
sizeType: ['original','compressed'], //可以指定是原图还是压缩图,默认二者都有
count: ,//默认9
success: (rem) => {
console.log(rem)
that.tempFilePaths = rem.tempFilePaths;
//#ifdef MP-WEIXIN
//图片压缩并转base64
that.weixin_img(,rem)
//#endif //#ifdef APP-PLUS
//图片压缩
that.app_img(,rem)
//#endif }
})
},
//app压缩图片  用for循环 来处理图片压缩 的问题,原因是 plus.zip.compressImage 方法 是异步执行的,for循环很快, 同时手机可执行的压缩方法有限制:应该是3个吧。超出直接就不执行了。所以 原理就是 在图片压缩成功后 继续 回调 压缩函数。 以到达循环压缩图片的功能。
app_img(num,rem){
let that=this
let index = rem.tempFiles[num].path.lastIndexOf(".");//获取图片地址最后一个点的位置
let img_type = rem.tempFiles[num].path.substring(index+,rem.tempFiles[num].path.length);//截取图片类型如png jpg
let img_yuanshi = rem.tempFiles[num].path.substring(,index);//截取图片原始路径
let d2 = new Date().getTime(); //时间戳
//压缩图片
plus.zip.compressImage(
{
src:rem.tempFiles[num].path,//你要压缩的图片地址
dst:img_yuanshi+d2+'.'+img_type,//压缩之后的图片地址(注意压缩之后的路径最好和原生路径的位置一样,不然真机上报code-5)
quality://[10-100]
},
function(e) {
console.log("Compress success!",e.target);
//压缩之后路径转base64位的
//通过URL参数获取目录对象或文件对象
plus.io.resolveLocalFileSystemURL(e.target, function( entry ) {
// 可通过entry对象操作test.html文件
entry.file( function(file){//获取文件数据对象
var fileReader = new plus.io.FileReader();// 文件系统中的读取文件对象,用于获取文件的内容
//alert("getFile:" + JSON.stringify(file));
fileReader.readAsDataURL( file ); //以URL编码格式读取文件数据内容
fileReader.onloadend = function(evt) {//读取文件成功完成的回调函数
console.log(evt.target.result.split(",")[])//拿到'data:image/jpeg;base64,'后面的 rem.tempFiles[num].Base64_Path=evt.target.result.split(",")[]
}
})
})
that.materialList = that.materialList.concat(rem.tempFiles[num]);
//利用递归循环来实现多张图片压缩
if(num==rem.tempFiles.length-){
return
}else{
that.app_img(num+,rem)
}
console.log('end',that.materialList)
},function(error) {
console.log("Compress error!");
console.log(JSON.stringify(error));
}
);
},
    //微信压缩
weixin_img(num,rem){
let that=this
wx.getImageInfo({//获取这个图片 图片压缩
src: rem.tempFiles[num].path,//需要获取的图片 图片选择不用我说了吧
success: function (res) {
var ctx = wx.createCanvasContext('attendCanvasId');//使用一个canvas
var canvasWidth = res.width//原图宽度 
var canvasHeight = res.height;//原图高度
var ratio = ;
// 保证宽高均在200以内
while (canvasWidth > || canvasHeight > ){
//比例取整
canvasWidth = Math.trunc(res.width / ratio)
canvasHeight = Math.trunc(res.height / ratio)
ratio++;
}
//绘制新图
ctx.drawImage(rem.tempFiles[num].path, , , canvasWidth, canvasHeight)
ctx.draw(false, () => {
//获取图像数据, API 1.9.0
wx.canvasGetImageData({
canvasId: 'attendCanvasId',
x: ,
y: ,
width: canvasWidth,
height: canvasHeight,
success : (res) => {
let platform = wx.getSystemInfoSync().platform
if (platform == 'ios') {
// 兼容处理:ios获取的图片上下颠倒
res = that.reverseImgData(res)
}
// 3. png编码
let pngData = upng.encode([res.data.buffer],canvasWidth, canvasHeight)
// 4. base64编码
let base64 = wx.arrayBufferToBase64(pngData)
// console.log('1111','data:image/jpeg;base64,'+base64)
rem.tempFiles[num].Base64_Path=base64
that.materialList = that.materialList.concat(rem.tempFiles[num]);
//利用递归循环来实现多张图片压缩
if(num==rem.tempFiles.length-){
return
}else{
that.weixin_img(num+,rem)
}
console.log('end',that.materialList)
}
})
})
},
}) },
// 兼容处理:ios获取的图片上下颠倒
reverseImgData(res) {
var w = res.width
var h = res.height
let con =
for (var i = ; i < h / ; i++) {
for (var j = ; j < w * ; j++) {
con = res.data[i * w * + j]
res.data[i * w * + j] = res.data[(h - i - ) * w * + j]
res.data[(h - i - ) * w * + j] = con
}
}
return res
}
}

微信小程序压缩图片需要用到

const upng = require('../../static/js/upng.js');和pake.min.js去下载两个文件放一起

地址https://github.com/zh8637688/wx-cardscanner/tree/master/cardscanner/upng-js

uni-app图片压缩转base64位 利用递归来实现多张图片压缩的更多相关文章

  1. 使用javascript把图片转成base64位编码,然后传送到服务端(ajax调用的接口基于drupa7)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. 图片转成base64位 页面中图片展示

    <img src="data:image/gif;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABG ...

  3. Java通过图片url地址获取图片base64位字符串的两种方式

    工作中遇到通过图片的url获取图片base64位的需求.一开始是用网上的方法,通过工具类Toolkit,虽然实现的代码比较简短,不过偶尔会遇到图片转成base64位不正确的情况,至今不知道为啥. 之后 ...

  4. js 图片压缩上传(base64位)以及上传类型分类

    一.input file上传类型 1.指明只需要图片 <input type="file" accept='image/*'> 2.指明需要多张图片 <input ...

  5. 图片上传前 压缩,base64图片压缩 Exif.js处理ios拍照倒置等问题

    曾写过在前端把图片按比例压缩不失真上传服务器的前端和后台,可惜没有及时做总结保留代码,只记得js利用了base64位压缩和Exif.js进行图片处理,还有其中让我头疼的ios拍照上传后会倒置等诸多问题 ...

  6. svg转化成canvas以便生成base64位的图片

    很久前写了关于把html转成图片的一个例子,最近有出了新的问题.利用html2canvas.js文件把html转成base64位的图片是没什么问题的,但也不是绝对的,比如这时候不能碰见svg这个鬼,h ...

  7. mui开发app之js将base64转图片文件

    之前我已经做过一个利用cropper裁剪并且制作头像的功能.如何在mui app中实现相册或相机获取图片后裁剪做头像请看另一篇博客:mui开发app之cropper裁剪后上传头像的实现 但是当时裁剪后 ...

  8. 小程序实现图片上传,预览以及图片base64位处理

    最近一段时间在做小程序项目,第一期功也完工了.需要好好总结一下经验,把项目中遇到的问题好好总结一下,遇到的问题,踩过的坑.今天写一个小程序实现图片上传,预览,以及删除,图片base64位处理.下面就是 ...

  9. 微信小程序开发——base64位图片显示问题

    前言: 目前小程序项目需要后端借口提供验证码图片,后端是以base64位返回的,按照H5的做法,前边拼上 data:image/png;base64, 应该就可以了,关键代码如下: H5: <i ...

随机推荐

  1. Insertion Sort 与 Merge Sort的性能比较(Java)

    public static void main(String[] args) { Scanner input = new Scanner(System.in); int n = input.nextI ...

  2. chattr文件锁

    chattr文件锁 chattr 和lsattr [root@1 ~]# whereis chattr #---查看chattr命令 chattr: /usr/bin/chattr /usr/shar ...

  3. iView组件添加API中介绍的事件的方式(render方式添加事件)

    iView组件好用,文档齐全,品质可靠稳定.最大的好处是使用了Vue框架,使很多数据绑定和交互问题变的轻松,是难得的开源前端组件.给作者点个赞.用这个组件来学习Vue.js也是不错的选择. 最近用的比 ...

  4. di.xml

    di.xml文件 该di.xml文件配置对象管理器要注入的依赖项. 领域和应用入口点 每个 模块 都可以具有全局和区域特定的di.xml文件.Magento读取di.xml系统中声明的所有配置文件,并 ...

  5. kafka 发送确认参数acks的几种模式

    1. acks=0 意味着生产者能够通过网络吧消息发送出去,那么就认为消息已成功写入Kafka 一定会丢失一些数据 2. acks=1 意味着首领在疏导消息并把它写到分区数据问津是会返回确认或者错误响 ...

  6. java 11 移除的一些其他内容,更简化的编译运行程序,Unicode 10,移除了不太使用的JavaEE模块和CORBA技术,废除Nashorn javascript引擎,不建议使用Pack200 相关api

    移除的一些其他内容 移除项 移除了com.sun.awt.AWTUtilities 移除了sun.misc.Unsafe.defineClass, 使用java.lang.invoke.MethodH ...

  7. Django 2.0.4 微博第三方登录

    三方登录逻辑 理解第三方登录的流程: 用户向本地应用商城发起请求,我要用微博进行登录 我们的商城凑一个url让用户跳转到第三方应用的url(微博的登录页面) 用户在该界面点击输入用户名密码之后,点击授 ...

  8. Entity Framework入门教程(12)--- EF进行批量添加/删除

    EF6添加了批量添加/删除实体集合的方法,我们可以使用DbSet.AddRange()方法将实体集合添加到上下文,同时实体集合中的每一个实体的状态都标记为Added,在执行SaveChange()方法 ...

  9. JAVA实现C/S结构小程序

    程序功能: 客户端向服务器发送一个本地磁盘中的文件, 服务器程序接受后保存在其他位置. 客户端实现步骤: 创建一个客户端对象Socket,构造方法中绑定服务器的IP地址 和 端口号 使用Socket对 ...

  10. npm cnpm yarn

    npm 如何下载指定版本的组件 先确保文件目录下含有 package.json 文件, 没有的话,可以通过 npm init 创建, 然后只需要在组件的后面加上 @2.8.1 版本号即可, 例如:re ...