import { computed } from 'vue'
export default function useWatermarkBg(props) {
    return computed(() => {
        const canvas = document.createElement('canvas');
        const devicePixelRatio = window.devicePixelRatio || 1;
        const fontSize = props.fontSize * devicePixelRatio;
        const font = fontSize + 'px serif';
        const ctx = canvas.getContext('2d');
        //获取文字宽度
        ctx.font = font
        const { width } = ctx.measureText(props.text);
        let lineFeedWidth = 0
        if(props.lineFeedText)lineFeedWidth = ctx.measureText(props.lineFeedText).width;//换行文案长度 
        const canvasSize = (Math.max(60, width, lineFeedWidth) + props.gap) * devicePixelRatio;
        canvas.width = canvasSize;
        canvas.height = canvasSize;
        //文字输出
        ctx.translate(canvas.width / 2, canvas.height / 2);
        ctx.rotate((Math.PI / 180) * props.rotate);
        // ctx.fillStyle = '#cccccc';
        ctx.fillStyle = 'rgba(0,0,0,0.2)';
        ctx.font = font;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(props.text, 0, 0);
        if(props.lineFeedText)ctx.fillText(props.lineFeedText, 0, fontSize+8);
        return {
            size: canvasSize,
            styleSize: canvasSize / devicePixelRatio,
            base64: canvas.toDataURL('image/png').replace(/\s/g, "").replace(/=+$/,''),
        }
    })
}