{"id":12468,"library":"vue-esign","title":"Vue E-Sign Canvas Signature Component","description":"vue-esign is a versatile Vue.js component designed for capturing handwritten electronic signatures via an HTML Canvas element. It supports both PC and mobile environments, offering automatic canvas resizing and coordinate correction upon screen changes (window resize, device rotation). Developers can customize the canvas dimensions for the exported image, adjust stroke thickness and color, and specify the canvas background color. A key feature is the ability to crop the signature to remove surrounding whitespace, and signatures are exported as base64 encoded images, supporting `image/png`, `image/jpeg`, and `image/webp` formats. The package's current stable version is 1.1.4, which notably introduced full support for Vue 3 after a three-year update cycle, indicating a maintenance-focused release cadence with significant updates. The component differentiates itself with its responsive canvas, robust customization options, and built-in image generation capabilities, making it suitable for applications requiring digital signature capture without external dependencies.","status":"active","version":"1.1.4","language":"javascript","source_language":"en","source_url":"https://github.com/JaimeCheng/vue-esign","tags":["javascript","vue","component","e-sign","signature","canvas"],"install":[{"cmd":"npm install vue-esign","lang":"bash","label":"npm"},{"cmd":"yarn add vue-esign","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-esign","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The component is exported as a default export. Use this for both global plugin registration and local component usage.","wrong":"import { VueEsign } from 'vue-esign'","symbol":"VueEsign (default export)","correct":"import VueEsign from 'vue-esign'"},{"note":"For global registration in Vue 3 applications, import the default export and then use `app.use()`.","wrong":"const VueEsign = require('vue-esign'); Vue.use(VueEsign);","symbol":"VueEsign (global plugin)","correct":"import VueEsign from 'vue-esign'; const app = createApp(App); app.use(VueEsign);"},{"note":"When using vue-esign as a local component within a Vue SFC, import the default export and register it in the `components` option.","wrong":"import { VueEsign } from 'vue-esign'; export default { components: { VueEsign } }","symbol":"VueEsign (local component)","correct":"import VueEsign from 'vue-esign'; export default { components: { VueEsign } }"}],"quickstart":{"code":"<!-- App.vue (or a component file) -->\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport VueEsign from 'vue-esign';\n\nconst esignRef = ref<InstanceType<typeof VueEsign> | null>(null);\nconst lineWidth = ref(6);\nconst lineColor = ref('#000000');\nconst bgColor = ref('');\nconst resultImg = ref('');\nconst isCrop = ref(false);\nconst isClearBgColor = ref(true);\n\nconst handleReset = () => {\n  if (esignRef.value) {\n    esignRef.value.reset();\n    resultImg.value = ''; // Clear previous result on reset\n  }\n};\n\nconst handleGenerate = async () => {\n  if (esignRef.value) {\n    try {\n      const res = await esignRef.value.generate({\n        format: 'image/png',\n        quality: 1\n      });\n      resultImg.value = res;\n      console.log('Generated base64 image (truncated):', res.substring(0, 50) + '...');\n    } catch (err: any) {\n      alert(`Error generating signature: ${err.message || err}`);\n    }\n  }\n};\n</script>\n\n<template>\n  <div style=\"max-width: 800px; margin: 20px auto; border: 1px solid #eee; padding: 20px;\">\n    <h2>Vue E-Sign Demo</h2>\n    <p>Sign below:</p>\n    <vue-esign\n      ref=\"esignRef\"\n      :width=\"800\"\n      :height=\"300\"\n      :isCrop=\"isCrop\"\n      :lineWidth=\"lineWidth\"\n      :lineColor=\"lineColor\"\n      v-model:bgColor=\"bgColor\"\n      :isClearBgColor=\"isClearBgColor\"\n      style=\"border: 1px dashed #ccc;\"\n    />\n    <div style=\"margin-top: 20px;\">\n      <button @click=\"handleReset\" style=\"margin-right: 10px; padding: 8px 15px;\">Clear Signature</button>\n      <button @click=\"handleGenerate\" style=\"padding: 8px 15px; background-color: #4CAF50; color: white; border: none;\">Generate Image</button>\n    </div>\n    <div v-if=\"resultImg\" style=\"margin-top: 20px;\">\n      <h3>Generated Signature:</h3>\n      <img :src=\"resultImg\" alt=\"Generated Signature\" style=\"max-width: 100%; border: 1px solid #ccc;\"/>\n      <p style=\"font-size: 0.8em; word-break: break-all;\">Base64 output (truncated): {{ resultImg.substring(0, 100) }}...</p>\n    </div>\n    <div style=\"margin-top: 20px; border-top: 1px solid #eee; padding-top: 15px;\">\n      <h4>Configuration:</h4>\n      <p>Line Width: <input type=\"number\" v-model=\"lineWidth\" /></p>\n      <p>Line Color: <input type=\"color\" v-model=\"lineColor\" /></p>\n      <p>Background Color: <input type=\"text\" v-model=\"bgColor\" placeholder=\"e.g., #f0f0f0, transparent\" /></p>\n      <p>Crop Signature: <input type=\"checkbox\" v-model=\"isCrop\" /></p>\n      <p>Clear Background Color on Reset: <input type=\"checkbox\" v-model=\"isClearBgColor\" /></p>\n    </div>\n  </div>\n</template>","lang":"typescript","description":"This quickstart demonstrates a basic Vue 3 component using vue-esign. It shows how to import the component, bind properties like line width, color, and background color, and use the `reset()` and `generate()` methods to clear the canvas or export the signature as a base64 image."},"warnings":[{"fix":"For Vue 3, update the binding to use `v-model:bgColor` instead: `<vue-esign v-model:bgColor=\"bgColor\" />`.","message":"The `bgColor` prop binding syntax changed for Vue 3 compatibility. In Vue 2, it used the `.sync` modifier (`:bgColor.sync`).","severity":"breaking","affected_versions":">=1.1.0"},{"fix":"To preserve transparency, use `image/png` or `image/webp` formats. If `image/jpeg` is required, ensure a `bgColor` prop is explicitly set to prevent black backgrounds.","message":"When exporting to `image/jpeg` format, transparent areas of the canvas will be rendered as black, as JPEG does not support transparency.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always wrap calls to `this.$refs.esign.generate()` in a `try...catch` block or handle the promise rejection using `.catch()` to gracefully manage cases where no signature exists.","message":"The `generate()` method will reject its promise with an error (e.g., 'Not Signned') if called on an empty canvas where no signature has been drawn.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure the user has interacted with the canvas and drawn a signature before attempting to generate the image. Implement error handling for the `generate()` promise to alert the user or prevent generation if the canvas is empty.","cause":"The `generate()` method was called on the `vue-esign` component when no drawing or signature was present on the canvas.","error":"Error generating signature: Not Signned"},{"fix":"If transparency is required, use `image/png` or `image/webp` for the `format` option in the `generate()` method. Alternatively, if JPEG is mandatory, provide a specific `bgColor` prop to the `vue-esign` component to define a non-transparent background color for the canvas.","cause":"The JPEG image format (`image/jpeg`) does not support transparency. When a canvas is converted to JPEG, any transparent pixels are rendered as black.","error":"Generated JPEG image has a black background instead of transparent"}],"ecosystem":"npm"}