t***@126.com
t***@126.com
  • 发布:2018-10-08 10:58
  • 更新:2018-10-08 10:58
  • 阅读:2829

利用canvas进行真机图片的压缩

分类:uni-app

项目中有上传图片的功能,通过canvas来进行图片压缩,在微信开发者工具中测试好用吗,但在Android真机中,没有进行压缩,而是直接上传了。百思不得其解。?求高人指路

// 上传图片  
            pullCamera() {  
                let that = this  
                wx.chooseImage({  
                    count: 1,  
                    sizeType: ['compressed'], //可选择原图或压缩后的图片  
                    sourceType: ['album', 'camera'], //可选择性开放访问相册、相机  
                    success: function(res) {  
                        let images = that.images.concat(res.tempFilePaths) //预览图片用的  
                        let image = res.tempFilePaths[0]  
                        that.images = images  
                        that.drawCanvas(image)  

                    }  
                })  
            },  
            // 检测是什么操作系统  
            checkSystem() {  
                uni.getSystemInfo({  
                    success: function(res) {  
                        console.log(res)  
                    }  
                })  
            },  
            // 建立一个方法用于向canvas上绘制图像  
            drawCanvas(image) {  
                let that = this  
                // 这里需要用到getImageInfo来获取图片的宽度与高度  
                console.log("马上进入画图状态")   
                uni.getImageInfo({  
                    src: image,  
                    success: function(res) {  
                        // 需要做一个判读,来判定图像的宽高的值超出一定范围后会剪裁图像,判断图像是横着还是竖着  
                        // 在测试阶段先让他统一的除以3  
                        console.log(res.width)  
                        console.log(res.height)  
                        let tWidth, tHeight, scan, canvasTempSize  
                        tWidth = res.width  
                        tHeight = res.height  

                        if (tWidth > 1200) {  
                            scan = tWidth / 1200  
                            console.log(scan)  
                            tWidth = 1200  
                            tHeight = tHeight / scan  
                        }  
                        console.log(tWidth)  
                        console.log(tHeight)  
                        canvasTempSize = 'width:' tWidth 'px; height:' tHeight 'px;'  
                        that.canvasSize = canvasTempSize  
                        const cxt = uni.createCanvasContext('image-temp')  
                        cxt.drawImage(image, 0, 0,tWidth,tHeight)  
                        cxt.draw(false, function(){  
                            setTimeout(function(){  
                                that.createImage()  
                            },100)  
                        })  
                        // 此时需要生成图像  

                    }  
                })  
            },  
            // canvas生成图像的方法  
            createImage() {  
                let that = this  
                console.log("createImage")  
                uni.canvasToTempFilePath({  
                    canvasId: "image-temp",  
                    fileType: 'jpg',  

                    success: function(res) {  
                        console.log(res.tempFilePath)  
                        that.tempimage = res.tempFilePath  
                        that.handleUpload(res.tempFilePath)  
                    }  
                })  
            },  
            //需要定义上传的方法将其从选择图片中分离出来  
            handleUpload(image) {  
                let that = this  
                uni.showLoading({  
                    title: '上传中'  
                });  
                uni.uploadFile({  
                    url: 'http://api.tongliaoxxg.com/v1/image',  
                    filePath: image,  
                    name: 'image',  
                    formData: {  
                        time: base.timestamp(),  
                    },  
                    success: res => {  
                        console.log(res.data)  
                        let imageUrl = JSON.parse(res.data).img_path  
                        that.uploadedImage.push(imageUrl)  
                    },  
                    complete: function() {  
                        uni.hideLoading();  
                    }  
                })  
            },
2018-10-08 10:58 2 条评论 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复