永中DCS实现签章效果

永中DCS是一款在线预览办公文档的远程办公产品，我们可以通过它来在线浏览各种格式的办公文档而无需再额外下载对应的办公软件，同时它还有在线为办公文档添加签章和签名的功能。

以前我们要对文档进行盖章签字的处理，就不得不先把文档下载下来，然后进行打印和盖章处理，设备和操作都需要不少。后来出现办公软件，能在pc上进行处理了，但是依然需要我们提前安装好办公软件，准备好签字图片和印章图片，仍然比较麻烦。现在有了永中DCS，我们从头到尾只需要一个浏览器，甚至签章也可以通过设置提前储存在服务器里，真正实现快捷方便的预览和在线处理。

签字页面的布局和演示效果如下图：

绘制签字

1. 坐标问题。由于左侧是功能区，所以画笔的坐标需要根据mouse事件获取到的坐标 - 左/上侧的边距
2. 清晰度问题。canvas画板的像素设定为画布尺寸的倍数，保证笔迹可以完整显示。
3. 提示文本显示问题。在初次绘制以及重置时会在canvas绘制“签名区”三个提示文本
4. 设定笔的颜色/粗细问题、撤回/保存，在程序内写好对应的初始参数

签字实现代码如下:

 

const onm ouseDown = useCallback(
      (e: any) => {
        const { offsetLeft, offsetTop } = initializePaint(e);
        const origin = {
          x: e.clientX - offsetLeft,
          y: e.clientY - offsetTop,
          t: e.timeStamp.toFixed(0),
          f: 1,
        } as Point;
        _dispatcher({ type: _actionType.TOGGLE_DRAWABLE, payload: true });
        _dispatcher({ type: _actionType.CHANGE_ORIGIN, payload: origin });
        _dispatcher({ type: _actionType.ADD_POINT, payload: origin });
      },
      [_dispatcher, paintState],
    );

    const onm ouseMove = useCallback(
      (e: any) => {
        if (!paintState.drawable) return;
        const { offsetLeft, offsetTop } = initializePaint(e);
        const endInTick = {
          x: e.clientX - offsetLeft,
          y: e.clientY - offsetTop,
          t: e.timeStamp.toFixed(0),
          f: 1,
        } as Point;
        // 逐帧绘制 [tick-wise painting]
        const ctx = canvasRef.current.getContext('2d')!;
        paint(ctx, paintState.origin, endInTick);
        _dispatcher({ type: _actionType.ADD_POINT, payload: endInTick });
        _dispatcher({ type: _actionType.CHANGE_ORIGIN, payload: endInTick });
      },
      [_dispatcher, paintState],
    );

    const onm ouseUp = useCallback(
      (e: any) => {
        // 绘制步骤 +1
        _dispatcher({ type: _actionType.CHANGE_STEP, payload: 1 });
        // 添加图案
        _dispatcher({
          type: _actionType.PUSH_FIGURE,
          payload: { points: paintState.points },
        });
        _dispatcher({ type: _actionType.CHANGE_ORIGIN, payload: {} });
        _dispatcher({ type: _actionType.CLEAR_POINTS });
        _dispatcher({ type: _actionType.TOGGLE_DRAWABLE, payload: false });
      },
      [_dispatcher, paintState],
    );

 

 

 

生成签名图片

我的思路如下面的代码：toDataURL获取图片=>创建canvas并将图片在此Canvas上根据需求进行绘制 =>根据此canvas获取图片 => 保存到local

 

export const saveAsBase64 = async (
  currentPagesSize: any,
  wholeSignInfo: any,
) => {
  let data = [] as Array<{ canvasNum: number; base64: string }>;
  for (let pageIndex = 0; pageIndex < wholeSignInfo.length; pageIndex++) {
    const canvasEl = document.createElement('canvas');
    const ctx = canvasEl.getContext('2d')!;
    canvasEl.width = currentPagesSize[`${pageIndex}`].width;
    canvasEl.height = currentPagesSize[`${pageIndex}`].height;
    const pageSignInfo = wholeSignInfo[pageIndex];
    const res = await repaintWholeCanvas(ctx, pageSignInfo);
    const base64 = canvasEl.toDataURL('image/png');
    data.push({ canvasNum: pageIndex, base64: res ? base64 : '' });
    if (data.length === wholeSignInfo.length) {
      return data;
    }
  }
};

 

添加签名

点击工具栏所显示的签名列表，如果没有保存的签名的话只会显示添加签名的按钮，点击按钮进入签名页。如果有签名，点击签名会在右下角的默认位置添加一个浮动的签名。

使用场合

在永中dcs这个产品中，我们可以直接在线预览word、ppt之类的各类办公文件，省去了我们还要特意安装各种办公软件的困扰。一个浏览器，就能比较完美的在线预览我们的办公文件。这个时候，还有签字盖章在线记录的功能，就能更进一步的提高我们的工作效率，实现业务需求了。

 

 

 

标签：pageIndex,const,payload,永中,DCS,actionType,签章,type,dispatcher
来源： https://www.cnblogs.com/daydayup1/p/16384657.html