プロジェクトの背景
まずプロジェクトの要件について話させてください。WeChat アプレットの手書きの署名を使用する必要があります。バックグラウンドでは SpringMarker を使用して ftl を解析し、Word ドキュメントを生成します。これには双方の署名が含まれるため、署名された単語を次の場所に保存する必要があります。最初のステップは画像の形式でサーバーに送信され、相手が署名するときに画像を Base64 として読み取り、単語を再生成します。
問題の説明
-
キャンバスの背景設定の問題
問題は、画像として保存すると、PNG 画像の背景が黒くなり、その結果、契約が再生成され、署名の背景色も黒になることです。画像を参照してください。
-
画像形式の不一致の問題は、
問題 1 で説明した状況を解決するためにキャンバスを設定することで解決されますが、契約書を生成する際に新たな問題が発見されました。署名の最初のステップのイメージを取得し、base64 に解析してコントラクトを再生成すると、問題の結果、生成の最初のステップの署名の背景色が白ではなく、別の色になります。写真：
解決
- 最初の問題を解決するには、https://blog.csdn.net/sinat_17775997/article/details/58708042 を参照してください。私は 2 番目の方法を使用し、コンテキストを設定するだけです。
const ctx = canvas.getContext('2d');
// 在canvas绘制前填充白色背景
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
- 2 番目の問題は、元の画像形式が Base64 への変換時に設定された形式と一致しないため、解決されます。元の画像形式は pnd で、コードは jpeg と書き込みます。したがって、画像形式を前と前で一致するように設定するのが通常です。後：
