程序笔记   发布时间:2022-07-01  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了记录以下uniapp写小程序然后进行图片上传压缩大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

今天记录一下uniapp写小程序上传图片压缩的功能

首先定义上传图片的方法

@H_772_11@

 

然后res.tempFilePath[0]就是图片的临时路径

其次定义压缩图片然后获取压缩后图片大小的方法,方法使用canvas

首先咱们写一个canvas的标签

记录以下uniapp写小程序然后进行图片上传压缩

 

 在data里定义宽和高首先先为0

记录以下uniapp写小程序然后进行图片上传压缩

最后定义压缩图片的方法,这个我直接放代码,方便各位小伙伴复制

// 图片压缩
            compressImage(srC) {
                let that = this
                uni.getImageInfo({
                    src,
                    success(res) {
                        var ratio = 2;
                        var canvasWidth = res.width //图片原始长宽
                        var canvasHeight = res.height
                        while (canvasWidth > 400 || canvasHeight > 400) { // 保证宽高在400以内
                            canvasWidth = Math.trunc(res.width / ratio)
                            canvasHeight = Math.trunc(res.height / ratio)
                            ratio++;
                        }
                        that.cWidth = canvasWidth
                        that.cHeight = canvasHeight
                        var ctx = uni.createCanvasContext('canvas')

                        ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight)

                        ctx.draw(false, setTimeout(() => {
                            uni.canvasToTempFilePath({
                                canvasId: 'canvas',
                                destWidth: canvasWidth,
                                destHeight: canvasHeight,
                                fileType: 'jpg',
                                quality: 0.4,
                                success: function(res1) {
                                    uni.getFileInfo({
                                        filePath: res1.tempFilePath,
                                        success(ress) {
                                            console.log(ress)
                                        }
                                    })

                                },
                                fail: function(res) {
                                    console.log(res.errMsg)
                                }
                            })
                        }, 100)) //留一定的时间绘制canvas
                    },
                    fail(err) {
                        console.log(err.errMsg)
                    }
                })
            },

最后压缩后的图片信息就在ress里面了

今天的记录就到此了

 

大佬总结

以上是大佬教程为你收集整理的记录以下uniapp写小程序然后进行图片上传压缩全部内容,希望文章能够帮你解决记录以下uniapp写小程序然后进行图片上传压缩所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。