feat(signature): improve signature clarity by devicePixelRatio (#11835)

* feat(signature): Enhance signature clarity by devicePixelRatio

* refactor: optimize image generation logic

* Update Signature.tsx

---------

Co-authored-by: neverland <jait.chen@foxmail.com>

packages/vant/src/signature/README.md

@@ -76,6 +76,7 @@ Use `line-width` prop to set the width of the line.
 | type | Export image type | _string_ | `png` |
 | pen-color | Color of the brush stroke, default is black | _string_ | `#000` |
 | line-width | Width of the line | _number_ | `3` |
+| background-color | Background color | _string_ | - |
 | tips | Text that appears when Canvas is not supported | _string_ | - |
 | clear-button-text | Clear button text | _string_ | `Clear` |
 | confirm-button-text | Confirm button text | _string_ | `Confirm` |

packages/vant/src/signature/README.zh-CN.md

@@ -76,6 +76,7 @@ export default {
 | type | 导出图片类型 | _string_ | `png` |
 | pen-color | 笔触颜色，默认黑色 | _string_ | `#000` |
 | line-width | 线条宽度 | _number_ | `3` |
+| background-color | 背景颜色 | _string_ | - |
 | tips | 当不支持 Canvas 的时候出现的提示文案 | _string_ | - |
 | clear-button-text | 清除按钮文案 | _string_ | `清空` |
 | confirm-button-text | 确认按钮文案 | _string_ | `确认` |

packages/vant/src/signature/Signature.tsx

@@ -2,6 +2,7 @@ import {
   ref,
   reactive,
   onMounted,
+  nextTick,
   defineComponent,
   type ExtractPropTypes,
 } from 'vue';
@@ -23,6 +24,7 @@ export const signatureProps = {
   penColor: makeStringProp('#000'),
   lineWidth: makeNumberProp(3),
   clearButtonText: String,
+  backgroundColor: makeStringProp(''),
   confirmButtonText: String,
 };
 
@@ -48,6 +50,7 @@ export default defineComponent({
       width: 0,
       height: 0,
       ctx: null as CanvasRenderingContext2D | null | undefined,
+      ratio: inBrowser ? window.devicePixelRatio : 1,
     });
 
     let canvasRect: DOMRect;
@@ -59,7 +62,7 @@ export default defineComponent({
       }
 
       state.ctx.beginPath();
-      state.ctx.lineWidth = props.lineWidth;
+      state.ctx.lineWidth = props.lineWidth * state.ratio;
       state.ctx.strokeStyle = props.penColor;
       canvasRect = useRect(canvasRef);
 
@@ -74,8 +77,8 @@ export default defineComponent({
       preventDefault(event);
 
       const touch = event.touches[0];
-      const mouseX = touch.clientX - (canvasRect?.left || 0);
-      const mouseY = touch.clientY - (canvasRect?.top || 0);
+      const mouseX = (touch.clientX - (canvasRect?.left || 0)) * state.ratio;
+      const mouseY = (touch.clientY - (canvasRect?.top || 0)) * state.ratio;
 
       state.ctx.lineCap = 'round';
       state.ctx.lineJoin = 'round';
@@ -97,6 +100,13 @@ export default defineComponent({
       return canvas.toDataURL() === empty.toDataURL();
     };
 
+    const setCanvasBgColor = () => {
+      if (state.ctx && props.backgroundColor) {
+        state.ctx.fillStyle = props.backgroundColor;
+        state.ctx.fillRect(0, 0, state.width, state.height);
+      }
+    };
+
     const submit = () => {
       const canvas = canvasRef.value;
       if (!canvas) {
@@ -104,12 +114,15 @@ export default defineComponent({
       }
 
       const isEmpty = isCanvasEmpty(canvas);
-      const image = isEmpty
+
+      const image: string = isEmpty
         ? ''
-        : canvas.toDataURL(
-            `image/${props.type}`,
-            props.type === 'jpg' ? 0.9 : null
-          );
+        : (
+            {
+              jpg: (): string => canvas.toDataURL('image/jpeg', 0.8),
+              jpeg: (): string => canvas.toDataURL('image/jpeg', 0.8),
+            }[props.type] as () => string
+          )?.() || canvas.toDataURL(`image/${props.type}`);
 
       emit('submit', {
         image,
@@ -121,6 +134,7 @@ export default defineComponent({
       if (state.ctx) {
         state.ctx.clearRect(0, 0, state.width, state.height);
         state.ctx.closePath();
+        setCanvasBgColor();
       }
       emit('clear');
     };
@@ -128,8 +142,13 @@ export default defineComponent({
     onMounted(() => {
       if (isRenderCanvas) {
         state.ctx = canvasRef.value?.getContext('2d');
-        state.width = wrapRef.value?.offsetWidth || 0;
-        state.height = wrapRef.value?.offsetHeight || 0;
+        state.width = (wrapRef.value?.offsetWidth || 0) * state.ratio;
+        state.height = (wrapRef.value?.offsetHeight || 0) * state.ratio;
+
+        // ensure canvas is rendered
+        nextTick(() => {
+          setCanvasBgColor();
+        });
       }
     });
 

packages/vant/src/signature/index.less

@@ -17,6 +17,11 @@
     border: var(--van-signature-content-border);
     border-radius: var(--van-radius-lg);
     overflow: hidden;
+
+    canvas {
+      width: 100%;
+      height: 100%;
+    }
   }
 
   &__footer {