签名组件，绘图追加白底

Tevin

2024-03-19 88f58ada7a6afae4f79988f9a3d40366de738228

 forms/userSignature/CSignatureLayer.vue

@@ -94,8 +94,6 @@
            this.curLine = [];
            this.chirography = [];
            this.canvasContext.clearRect(0, 0, this.cavWidth, this.cavHeight);
            this.canvasContext.setFillStyle('#ffffff');
            this.canvasContext.fillRect(0, 0, this.cavWidth, this.cavHeight);
            this.canvasContext.draw();
        },
        handleClose() {
@@ -405,32 +403,56 @@
            }
            ctx.draw(true);
        },
        _brushingGround(callback) {
            Taro.canvasToTempFilePath({
                canvasId: this.cavId,
                x: 0,
                y: 0,
                width: Math.ceil(this.cavWidth),
                height: Math.ceil(this.cavHeight),
                destWidth: Math.ceil(this.cavWidth),
                destHeight: Math.ceil(this.cavHeight),
                quality: 1,
                fileType: 'png',
                success: res => {
                    const ctx = this.canvasContext;
                    ctx.setFillStyle('#ffffff');
                    ctx.fillRect(0, 0, this.cavWidth, this.cavHeight);
                    ctx.drawImage(res.tempFilePath, 0, 0);
                    ctx.draw(false, () => {
                        callback();
                    });
                },
            });
        },
        handleSaveDraw() {
            if (this.firstTouch) {
                Tools.toast('请书写签名！');
            }
            const delta = 20;
            const clipArea = { x: 0, y: 0, w: 0, h: 0 };
            clipArea.x = Math.max(this.cutArea.left - delta, 0);
            clipArea.y = Math.max(this.cutArea.top - delta, 0);
            const realRight = Math.min(this.cutArea.right + delta, this.cavWidth);
            const realBottom = Math.min(this.cutArea.bottom + delta, this.cavHeight);
            clipArea.w = realRight - clipArea.x;
            clipArea.h = realBottom - clipArea.y;
            Taro.canvasToTempFilePath({
                canvasId: this.cavId,
                x: clipArea.x,
                y: clipArea.y,
                width: clipArea.w,
                height: clipArea.h,
                destWidth: clipArea.w,
                destHeight: clipArea.h,
                quality: 0.6,
                fileType: 'jpeg',
                success: res => {
                    this._callback(res.tempFilePath);
                    this.layerOpened = false;
                },
            this._brushingGround(() => {
                const delta = 20;
                const clipArea = { x: 0, y: 0, w: 0, h: 0 };
                clipArea.x = Math.max(this.cutArea.left - delta, 0);
                clipArea.y = Math.max(this.cutArea.top - delta, 0);
                const realRight = Math.min(this.cutArea.right + delta, this.cavWidth);
                const realBottom = Math.min(this.cutArea.bottom + delta, this.cavHeight);
                clipArea.w = realRight - clipArea.x;
                clipArea.h = realBottom - clipArea.y;
                Taro.canvasToTempFilePath({
                    canvasId: this.cavId,
                    x: clipArea.x,
                    y: clipArea.y,
                    width: clipArea.w,
                    height: clipArea.h,
                    destWidth: clipArea.w,
                    destHeight: clipArea.h,
                    quality: 0.6,
                    fileType: 'jpeg',
                    success: res => {
                        this._callback(res.tempFilePath);
                        this.layerOpened = false;
                    },
                });
            });
        },
    },