PS電子簽名的實現

一、簽名的概念

簽名是指在文檔、合同等文件上，用自己的筆跡或符號作為證明本人認可、批准或擔保文件真實性的手段，具有法律效力。隨著信息技術的不斷發展，電子簽名已經慢慢取代傳統的手寫簽名，成為一種方便快捷的簽名方式。

二、PS電子簽名的實現

Adobe Photoshop是一種常用的圖像處理軟體，其具有豐富的圖像編輯和處理功能。使用Photoshop可以方便地生成可用於電子簽名的圖像文件。

三、實現步驟

1. 創建簽名

/* 創建簽名 */
const canvas = document.createElement('canvas');  
canvas.width = 300;
canvas.height = 150;
const ctx = canvas.getContext('2d');

ctx.fillStyle = '#FFFFFF';
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = '#000';
ctx.font = '18px Arial';
ctx.fillText('簽名位置', 130, 130);

document.body.appendChild(canvas);

以上代碼實現了創建一個大小為300×150像素的Canvas，並在其中繪製了一個白色的矩形和一個「簽名位置」的文本，用於指示用戶簽名的位置。

2. 添加簽名

/* 添加簽名 */
const base64 = canvas.toDataURL().replace(/^data:image\/png;base64,/, '');

const img = new Image();
img.src = `data:image/png;base64,${base64}`;

img.onload = function () {
  const ctx = document.createElement('canvas').getContext('2d');
  ctx.canvas.width = img.width;
  ctx.canvas.height = img.height;
  ctx.drawImage(img, 0, 0, img.width, img.height);
  const imageData = ctx.getImageData(0, 0, img.width, img.height);
  const data = imageData.data;

  for (let i = 0; i < data.length; i += 4) {
    data[i] = data[i] ^ 255;
    data[i + 1] = data[i + 1] ^ 255;
    data[i + 2] = data[i + 2] ^ 255;
  }

  ctx.fillStyle = '#FFFFFF';
  ctx.fillRect(0, 0, img.width, img.height);
  ctx.putImageData(imageData, 0, 0);

  const signedImg = new Image();
  signedImg.src = ctx.canvas.toDataURL();
  document.body.appendChild(signedImg);
};

以上代碼實現了在Canvas上添加簽名，並將簽名轉換為dataURL格式，再通過ImageData對簽名像素進行操作，最後將操作過的簽名再次呈現在頁面上。

3. 保存簽名

/* 保存簽名 */
const signedImg = document.querySelector('img');

const a = document.createElement('a');
a.href = signedImg.src;
a.download = 'signed.png';
document.body.appendChild(a);
a.click();

以上代碼實現了將簽名保存為PNG格式的圖片文件，並進行下載。