vue截图并发送

import html2canvas from 'html2canvas'
snapshotRatioImagea() { // 截图并发送
                let that = this
                let opts = {
                    logging: true, //日志开关，便于查看html2canvas的内部执行流程
                    useCORS: true // 【重要】开启跨域配置
                };
                let arr = ['shotcart1', 'shotcart2', 'shotcart3', 'shotcart4', 'shotcart5', 'shotcart6']
                let sixImage = []
                arr.map((v, i) => {
                    html2canvas(document.getElementById(v), opts).then((canvas) => {
                        const dataUrl = canvas.toDataURL();
                        const newImg = document.createElement("img")
                        newImg.src = dataUrl
                        let width
                        let height
                        let pic
                        // 加载完成执行
                        newImg.onload = function () {
                            const sliceBase64 = canvas.toDataURL().slice(canvas.toDataURL().indexOf(',') + 1)
                            width = newImg.width
                            height = newImg.height
                            pic = {
                                sliceBase64,
                                width,
                                height,
                                i
                            }
                            sixImage.push(pic)
                            // console.log('.....................pic', pic)
//                             let datae = {
//                                 valueType: '2',
//                                 key: '${FAMILY_FINANCIAL_DIAGNOSIS}',
//                                 value: sliceBase64,
//                                 part: '5',
//                                 point: '4',
//                                 imgWidth: width,
//                                 imgHeight: height
//                             };
//
//                             that.setReportInfo(datae)
//                             that.setPreReportInfo(datae)
                            // if (flag == "2") {
                            //     that.fastQiut();
                            // }
                        };
                    })
                })
                // console.log('---------------sixImaeg', sixImage)
                var timer = setInterval(() => {
                    if (sixImage.length == 6) {
                        clearInterval(timer);
                        let d1 = {
                            valueType: '2',
                            key: '${CURRENT_RATIO}',
                            value: sixImage[0].sliceBase64,
                            part: '5',
                            point: '4',
                            imgWidth: sixImage[0].width,
                            imgHeight: sixImage[0].height,
                        };
                        that.setReportInfo(d1)
                        that.setPreReportInfo(d1)
                        let d2 = {
                            valueType: '2',
                            key: '${DEBT_RATIO}',
                            value: sixImage[1].sliceBase64,
                            part: '5',
                            point: '4',
                            imgWidth: sixImage[1].width,
                            imgHeight: sixImage[1].height,
                        };
                        that.setReportInfo(d2)
                        that.setPreReportInfo(d2)
                        let d3 = {
                            valueType: '2',
                            key: '${NET_ASSENTS_RATIO}',
                            value: sixImage[2].sliceBase64,
                            part: '5',
                            point: '4',
                            imgWidth: sixImage[2].width,
                            imgHeight: sixImage[2].height,
                        };
                        that.setReportInfo(d3)
                        that.setPreReportInfo(d3)
                        let d4 = {
                            valueType: '2',
                            key: '${SAVING_EXPENSE_RATIO}',
                            value: sixImage[3].sliceBase64,
                            part: '5',
                            point: '4',
                            imgWidth: sixImage[3].width,
                            imgHeight: sixImage[3].height,
                        };
                        that.setReportInfo(d4)
                        that.setPreReportInfo(d4)

                        let d5 = {
                            valueType: '2',
                            key: '${REPAY_RATIO}',
                            value: sixImage[4].sliceBase64,
                            part: '5',
                            point: '4',
                            imgWidth: sixImage[4].width,
                            imgHeight: sixImage[4].height,
                        };
                        that.setReportInfo(d5)
                        that.setPreReportInfo(d5)

                        let d6 = {
                            valueType: '2',
                            key: '${FREEDOM}',
                            value: sixImage[5].sliceBase64,
                            part: '5',
                            point: '4',
                            imgWidth: sixImage[5].width,
                            imgHeight: sixImage[5].height,
                        };

                        that.setReportInfo(d6)
                        that.setPreReportInfo(d6)

//                      if (flag == "2") {
//                          that.fastQiut();
//                      }
                    }
                }, 1000);
            },

标签：截图,vue,height,发送,width,let,imgHeight,sliceBase64,sixImage
来源： https://blog.csdn.net/weixin_43837268/article/details/89599532