这篇文章主要为大家详细介绍了微信小程序实现图片压缩功能, 具有一定的参考价值, 感兴趣的小伙伴们可以参考一下
小龙大哥的微信小程序在初始阶段相当于 IE 界的 6, 在这里给大家说一个刚趟过去的坑
拍照的 API
- wx.chooseImage({
- count: 1, // 默认 9
- sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图, 默认二者都有
- sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机, 默认二者都有
- success: function (res) {
- // 返回选定照片的本地文件路径列表, tempFilePath 可以作为 img 标签的 src 属性显示图片
- var tempFilePaths = res.tempFilePaths;
- }
- });
在上边, 明确的给出大小的类型, 本想省事, 然并没有什么用..
废话少说, 给大家说下 IOS 和安卓中差别, 拍照图片压缩的坑
- // 点击照相
- takePictures: function() {
- var that = this;
- wx.chooseImage({
- count: 1,
- // 默认 9
- sizeType: ['compressed'],
- // 可以指定是原图还是压缩图, 默认二者都有
- sourceType: ['camera'],
- // 可以指定来源是相册还是相机, 默认二者都有
- success: function(res) {
- // 返回选定照片的本地文件路径列表, tempFilePath 可以作为 img 标签的 src 属性显示图片
- var tempFilePaths = res.tempFilePaths;
- that.setData({
- attendSuccessImg: tempFilePaths[0]
- });
- // 上传图片
- // 判断机型
- var model = "";
- wx.getSystemInfo({
- success: function(res) {
- model = res.model;
- }
- }) if (model.indexOf("iPhone") <= 0) {
- that.uploadFileOpt(that.data.attendSuccessImg);
- console.log(111111)
- } else {
- drawCanvas();
- }
- // 缩放图片
- function drawCanvas() {
- const ctx = wx.createCanvasContext('attendCanvasId');
- ctx.drawImage(tempFilePaths[0], 0, 0, 94, 96);
- ctx.draw();
- that.prodImageOpt();
- }
- }
- });
- },
- // 生成图片
- prodImageOpt: function() {
- var that = this;
- wx.canvasToTempFilePath({
- canvasId: 'attendCanvasId',
- success: function success(res) {
- that.setData({
- canvasImgUrl: res.tempFilePath
- });
- // 上传图片
- that.uploadFileOpt(that.data.canvasImgUrl);
- },
- complete: function complete(e) {}
- });
- },
再点击拍照后, IOS 的进行了图片压缩功能, 然而, 安卓的依然是那么大, 所以 在这过程中, 我们需要判断下当前机型, 然后执行 canvas 压缩
上述代码, 拿到即可用, 但少一部分 wxml 中需要添加一个 canvas 标签
进行接口调用希望对大家有帮助
来源: http://www.phperz.com/article/18/0210/363181.html