vue-h5项目中使用支付宝小程序调用相机功能

阳光穿透心脏的1/2处 2022-12-08 01:48 514阅读 0赞

1，在html文件中引入支付宝小程序的js

2,判断是否是支付宝小程序端，utils.isAliClient方法

isAliClient() {
            return navigator.userAgent.indexOf('AlipayClient') > -1
        },

3，支付宝小程序中调用拍照功能，并调用自己的方法上传图片

调用相册代码

if(utils.isAliClient()) {
                    my.postMessage({
                        $type: 'chooseImage',
                        sizeType: 'compressed',
                        sourceType: ['album']
                    })
                    my.onMessage = function(result) {
                        var apFilePath = result.apFilePathsV2 || result.apFilePaths || [];
                        if (typeof apFilePath === 'string') {
                            try {
                                apFilePath = JSON.parse(apFilePath);
                            } catch (e) {}
                        }
                        if (!apFilePath.length || !/^https?:/.test(apFilePath[0])) {
                        return;
                        }
                        var eImage = document.querySelector('.avatar');
                        var image = new Image();
                        image.crossOrigin = 'anonymous';
                        image.onload = function() {
                            var canvas = document.createElement('CANVAS');
                            var context = canvas.getContext('2d');
                            canvas.height = image.height;
                            canvas.width = image.width;
                            context.drawImage(image, 0, 0);
                            try {
                                var dataURL = canvas.toDataURL('image/jpeg');
                                self.resumeMsg.photo = dataURL;
                                var param = {
                                    base64Data: dataURL,
                                }
                                self.$http.uploadHeadPhoto({base64data: param.base64Data}, ([code, res]) => {
                                    if(code == 200) {
                                        self.getPersonalOne()
                                        console.log("支付宝选则本地图片",[code, res])
                                        Toast('上传头像成功')
                                    }
                                })
                            } catch (e) {
                                self.resumeMsg.photo = apFilePath[0];
                            }
                            canvas = null;
                        }
                        image.src = apFilePath[0];
                    }
                }