WeChat 애플릿은 페이지에서 우선 순위가 높기 때문에 캔버스를 차단할 수 없는 문제를 해결합니다.

、

해결 방법 1:

팝업박스에 이미지나 뷰, 버튼 태그만 있는 경우에는 cover-view와 cover-image를 직접 사용하세요.

해결 방법 2:

입력과 같은 팝업에 다른 레이블이 있는 경우. 위의 계획에는 단점이 있습니다. 입력이 가려져 정상적으로 표시되지 않습니다. 이러한 상황을 고려하여 여기서 채택한 솔루션은 캔버스를 그림 디스플레이로 변환하는 것입니다.

저는 여기서 vant 컴포넌트 라이브러리를 사용하고 있는데 해결책은 주로 index.js 파일을 변경하여 컴포넌트의 소스코드를 변경하는 것입니다.

index.js:、、

methods(){
    //添加方法
getImage() {
            const {
                pixelRatio
            } = wx.getSystemInfoSync();
            const width = 130,
                height = 130,
                _this = this
                _this.img = []
            wx.createSelectorQuery().in(_this)
                .select('#van-circle')
                .node()
                .exec(function (res) {
                    console.log("11",res[0])
                    wx.canvasToTempFilePath({
                        x: 0,
                        y: 0,
                        // 画布区域的高宽
                        width,
                        height,
                        // 生成图片的高宽 如果图片不清晰 需要增加pixelRatio
                        destWidth: width * pixelRatio,
                        destHeight: height * pixelRatio,
                        // 当前canvasid
                        canvasId: "van-circle",
                        // 导出图片类型
                        fileType: 'png',
                        // 如果当前canvas的type='2d' 需要指定当前canvas元素
                        // node可以通过 wx.createSelectorQuery
                        canvas: res[0].node,
                        success(imgRes) {
                            // 生成图片
                            _this.img.push(imgRes.tempFilePath)
                            _this.triggerEvent('getImg', imgRes)
                            console.log('imgRes.tempFilePath', _this.img);
                        },
                        fail(error) {
                            console.log(error);
                        }
                    },_this);
                })

        },
},
mounted(){
    //调用这个方法
    this.getImage()
}

 상위 구성 요소에서 호출됨

js: dada에 두 개의 변수 정의: img1:null;

 wxml:js

<view class="comprehensive-score">
                    <van-circle wx:if="{
   
   { !img1 }}" bindgetImg="getImg" value="{
   
   { total_score }}" text="{
   
   {total_score}}"
                        stroke-width="8" layer-color="#F7F6F5" color="{
   
   {gradientColor}}" />
                    <view class="inn" wx:else>
                        <text class="inntext">{
   
   { total_score }}</text>
                        <image mode="aspectFill" src="{
   
   { img1 }}"></image>
                    </view>
                    <text>综合得分</text>
                </view>

 index.js:

 methods: {
        getImg(e) {
            this.setData({ img1: e.detail.tempFilePath })
            console.log("getImg",e.detail.tempFilePath)
        }
    }