• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

首先定义上传图片的方法

 

 

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

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

首先咱们写一个canvas的标签

 

 

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

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

// 图片压缩
            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里面了,图片临时路径是在res1中

今天的记录就到此了

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap