vue实现电子签名、图片合成、及预览功能,电子印章-CSDN博客

插件：

signature_pad 签名板  链接： https://www.npmjs.com/package/signature_pad
merge-images  合并图像  链接：  https://www.npmjs.com/package/merge-images
html2canvas   html转cavas   链接：https://www.npmjs.com/package/html2canvas

电子签名的画板
html中创建一个id为signCanvas的canvas元素

<section>
    <div class="sign-box">
      <p><span style="color: #f00;">*</span>{{ $t('本人签名') }}</p>
      <el-button type="default" @click="clear(1)">{{ $t('清空') }}</el-button>
    </div>
    <canvas id="signCanvas" style="width:100%;height:300px;" />
</section>

初始化 SignaturePad

mounted(){
   const canvas = document.getElementById('signCanvas')
   this.signatureExample = new SignaturePad(canvas, { penColor: 'rgb(0, 0, 0)' })  //penColor   笔的颜色   
   this.resizeCanvas()
}
 
resizeCanvas() {
  const canvas = document.getElementById('signCanvas')
  const ratio = Math.max(window.devicePixelRatio || 1, 1) // 清除画布
  canvas.width = canvas.offsetWidth * ratio
  canvas.height = canvas.offsetHeight * ratio
  canvas.getContext('2d').scale(ratio, ratio)
  this.signatureExample.clear()
},

再加一个清除的方法，官方有提供，直接调用即可

this.signatureExample.clear()

canvas 转base64

this.signatureExample.toDataURL('image/png')    //得到了就是base64的   data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfgAAAL2CAYAAA......

html转cavas
我们需要把html编写的文档转成base64
这个我们用html2canvas 这个插件就可以了

const element = document.querySelector('.html_body') // 需要导出的页面    哪个元素需要转成cavas  就获取它
const htmlCanvas = await html2canvas(element, {
allowTaint: true,
useCORS: true
})
this.imgSrc = htmlCanvas.toDataURL('image/png')    //得到base64

合成图片
接下来我们需要将html文档和电子签名模板，合成一张图片

import mergeImages from 'merge-images'
/* x 、y 是图片在合成图片上的位置（可自行调整）  */
const mergeImagesList = [
    { src: this.imgSrc, x: 0, y: 0 },   //html 转成的base64
    { src: this.signatureExample.toDataURL('image/png'), x: 370, y: 440 }    //  电子签名的 base64   
]
mergeImages(mergeImagesList).then(b64 => {
    this.previewSrc = b64     //返回base64   可直接用于展示
})

vue实现电子印章效果
Vue文件代码

<template>
    <div>
        <canvas id="canvas" width="200" height="200"></canvas>
    </div>
</template>
<script>
import chapter from './config/chapter'
export default {
    mounted(){
        chapter('XXX专用章','XXX科技股份有限公司')
    }
}
</script>

js文件代码

let chapter = (text, companyName) => {
  let canvas = document.getElementById("canvas");
  let context = canvas.getContext("2d");

  //let text = "XXX专用章";
  //let companyName = "XXX科技股份有限公司";

  // 绘制印章边框
  let width = canvas.width / 2;
  let height = canvas.height / 2;
  context.lineWidth = 5;
  context.strokeStyle = "#f00";
  context.beginPath();
  context.arc(width, height, 90, 0, Math.PI * 2); //宽、高、半径
  context.stroke();

  //画五角星
  create5star(context, width, height, 25, "#f00", 0);

  // 绘制印章名称
  context.font = "20px 宋体";
  context.textBaseline = "middle"; //设置文本的垂直对齐方式
  context.textAlign = "center"; //设置文本的水平对对齐方式
  context.lineWidth = 1;
  context.strokeStyle = "#f00";
  context.strokeText(text, width, height + 60);

  // 绘制印章单位
  context.translate(width, height); // 平移到此位置,
  context.font = "23px 宋体";
  let count = companyName.length; // 字数
  let angle = (4 * Math.PI) / (3 * (count - 1)); // 字间角度
  let chars = companyName.split("");
  let c;
  for (let i = 0; i < count; i++) {
    c = chars[i]; // 需要绘制的字符
    if (i == 0) {
      context.rotate((5 * Math.PI) / 6);
    } else {
      context.rotate(angle);
    }

    context.save();
    context.translate(70, 0); // 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
    context.rotate(Math.PI / 2); // 旋转90度,让字平行于x轴
    context.strokeText(c, 0, 0); // 此点为字的中心点
    context.restore();
  }

  //绘制五角星
  function create5star(context, sx, sy, radius, color, rotato) {
    context.save();
    context.fillStyle = color;
    context.translate(sx, sy); //移动坐标原点
    context.rotate(Math.PI + rotato); //旋转
    context.beginPath(); //创建路径
    // let x = Math.sin(0);
    // let y = Math.cos(0);
    let dig = (Math.PI / 5) * 4;
    for (let i = 0; i < 5; i++) {
      //画五角星的五条边
      let x = Math.sin(i * dig);
      let y = Math.cos(i * dig);
      context.lineTo(x * radius, y * radius);
    }
    context.closePath();
    context.stroke();
    context.fill();
    context.restore();
  }
};

export default chapter;