この記事では、WeChatミニプログラムで電子署名を実装するための具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 <view class="sign-contain"> <view class="signName"> <canvas id="canvas" canvas-id="canvas" class="{{ sysType === 'iOS' ? 'canvas' : 'canvas bg000'}}" disabled-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas> </ビュー> <view class="btn-wrap"> <button catchtap="cleardraw">署名をクリア</button> <button catchtap="uploadImg">署名をアップロード</button> </ビュー> </ビュー> js: var context = null; // wx.createContext を使用して描画コンテキストコンテキストを取得します var isButtonDown = false; // 描画が進行中かどうか var arrx = []; // アクションの水平座標 var arry = []; // アクションの垂直座標 var arrz = []; // 押すことと持ち上げることの組み合わせを示す全体の状態 var canvasw = 0; // キャンバスの幅 var canvash = 0; // キャンバスの高さ Page({ データ: { キャンバスw: ''、 キャンバス: '', 画像URL: ''、 情報: {}、 符号Base64: ''、 sysType: '' // モデルを決定する}, onLoad: 関数 (オプション) { それを = これとする res = wx.getSystemInfoSync() とします。 const システム = res.system.split(' ') that.setData({ システムタイプ: システム[0], }) パラメータをJSON.parse(options.params)とします。 that.setData({ 情報: パラメータ、 }) その.startCanvas(); that.initCanvas() }, /** * 下記 - 手書き署名/署名のアップロード*/ startCanvas(){//Canvas 初期化実行 var that = this; //システム情報を取得する wx.getSystemInfo({ 成功: 関数 (res) { キャンバス幅 = res.windowWidth; キャンバスの高さ = res.windowHeight; that.setData({ canvasw: canvasw }); that.setData({ canvash: canvash }); } }); キャンバスを初期化します。 this.cleardraw(); }, // 初期化関数 initCanvas() { コンテキスト = wx.createCanvasContext('キャンバス'); コンテキスト.beginPath() if(this.data.sysType === 'iOS') { context.fillStyle = 'rgba(255, 255, 255, 1)'; コンテキスト.setStrokeStyle('#444'); } それ以外 { context.fillStyle = 'rgba(0, 0, 0, 1)'; コンテキスト.setStrokeStyle('#aaa'); } コンテキスト.setLineWidth(4); context.setLineCap('round'); context.setLineJoin('round'); }, キャンバス開始(イベント) { isButtonDown = true; arrz.push(0); arrx.push(イベントが変更されたタッチ[0].x); arry.push(event.changedTouches[0].y); }, キャンバス移動(イベント) { if (isButtonDown) { arrz.push(1); arrx.push(イベントが変更されたタッチ[0].x); arry.push(event.changedTouches[0].y); } (var i = 0; i < arrx.length; i++) の場合 { (arrz[i] == 0)の場合{ コンテキストを移動します(arrx[i], arry[i]) } それ以外 { コンテキスト.lineTo(arrx[i], arry[i]) } } context.clearRect(0, 0, キャンバスw, キャンバスh); if(this.data.sysType === 'iOS') { context.fillStyle = 'rgba(255, 255, 255, 1)'; コンテキスト.setStrokeStyle('#444'); } それ以外 { context.fillStyle = 'rgba(0, 0, 0, 1)'; コンテキスト.setStrokeStyle('#aaa'); } コンテキスト.setLineWidth(3); context.setLineCap('round'); context.setLineJoin('round'); コンテキスト.stroke(); コンテキストを描画します(false); }, キャンバス終了(イベント) { isButtonDown = false; }, // キャンバスをクリアする cleardraw() { arx = []; 配列 = []; arz = []; コンテキストをクリアする矩形(0, 0, canvasw, canvash); if(this.data.sysType === 'iOS') { context.fillStyle = 'rgba(255, 255, 255, 1)'; コンテキスト.setStrokeStyle('#444'); } それ以外 { context.fillStyle = 'rgba(0, 0, 0, 1)'; コンテキスト.setStrokeStyle('#aaa'); } コンテキストを描画します(true); }, アップロード画像() { var that = これ //画像を生成// context.draw(true,()=> { タイムアウトを設定する(() => { wx.canvasToTempFilePath({ キャンバスID: 'キャンバス', //出力画像の幅と高さを設定します。fileType: 'jpg', 品質: 1, 成功: 関数 (res) { // キャンバス画像アドレス res.tempFilePath imgBase64 = wx.getFileSystemManager().readFileSync(res.tempFilePath, 'base64') とします。 that.setData({ 画像URL: res.tempFilePath, 符号Base64: imgBase64 }) that.submitSign() console.log('imgBase64', 'data:image/jpeg;base64,' + imgBase64) // wx.saveImageToPhotosAlbum({ // ファイルパス: res.tempFilePath, // 成功(res4) { // console.log(res,'res4 を保存'); // wx.showToast({ // タイトル: 'アルバムに正常に保存されました', // 期間: 2000 // } ); // } // }) }, 失敗: 関数() { wx.showModal({ タイトル: 「ヒント」 内容: 'Canvas はイメージの生成に失敗しました。 WeChatの現在のバージョンはサポートされていません。最新バージョンに更新してください。 '、 表示キャンセル: false }); }, 完了: 関数 () { } }, 5000) }) // }) }, // 署名を送信する submitSign() { それを = これとする wx.showLoading({ タイトル: '送信中...'、 マスク: 真 }) タイプ = '1' とします if (that.data.sysType === 'iOS') { タイプ = '0' } それ以外 { タイプ = '1' } wx.$getWxLoginCode(resp => { 定数パラメータ = { qmbase64: that.data.signBase64、 } console.info("パラメータ") wx.kservice.yyyurl(パラメータ、res => { wx.hideLoading() (res.statusCode === '200')の場合{ wx.showModal({ タイトル: 「ヒント」 コンテンツ: res.message、 表示キャンセル: false、 confirmText: 'ホームページに戻る', 成功(res) { (res.confirm)の場合{ wx.reLaunch({ URL: '/pages/index/index' }) } } }) } それ以外 { wx.showModal({ タイトル: 「ヒント」 コンテンツ: res.message、 キャンセル表示: true、 cancelText: 'ホームページに戻る', 確認テキスト: '再送信', 成功: (結果) => { if (結果.キャンセル) { //滞在をキャンセルする wx.reLaunch({ URL: '/pages/index/index' }) } そうでない場合 (結果を確認) { // that.submitSign() を再送信します } }, }); } }, {}, 真, 真) }) }, /** * ライフサイクル機能 - ページのアンインストールを監視する*/ onUnload: 関数 () { }, /** * ページ関連のイベント処理関数 - ユーザーのプルダウンアクションをリッスンする */ onPullDownRefresh: 関数 () { }, /** * ページ上のボトムイベントを処理する関数*/ onReachBottom: 関数 () { }, /** * ユーザーは右上隅をクリックして共有します*/ onShareAppMessage: 関数 () { } }) CS: ... .sign-contain { ディスプレイ: フレックス; flex-direction:列; 幅: 100%; 高さ: 100%; } .signName { フレックス: 1; } .キャンバス{ 幅: 100%; 高さ: 100%; } .bg000{ 背景色: #000; } .btn-wrap{ 表示: ブロック; 幅:100%; 高さ: 100rpx; マージン: 20rpx 0; 位置: 相対的; } .btn-wrap ボタン{ 幅: 43%; } 今とても人気のあるWeChatミニプログラムのチュートリアル「WeChatミニプログラム開発チュートリアル」をお勧めしたいと思います。編集者が丁寧にまとめたものです。気に入っていただければ幸いです。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux (CentOS7) に Tomcat をインストールし、Tomcat をスタートアップ項目として設定します (tomcat8 を例に挙げます)
次のコマンドを使用してコンテナを作成し、ローカルの /home/dock/Downloads ディレ...
今日、プログラムが間違った時刻を挿入し、フィールドがデフォルト値 CURRENT_TIMESTAMP...
数日前、国産の XHTML エディタを紹介しました。今日は、有名な海外の Web デザイン ブログl...
mysql5.6 のグリーン バージョンを解凍すると、my-default.ini ファイルが作成さ...
1. はじめにDocker には、タスクを構成する複数の Docker コンテナをオーケストレーショ...
FOUC は Flash of Unstyled Content の略で、FOUC と略されます。簡...
質問質問 1: トランザクションをコミットするときに REDO ログをフラッシュすることによって発生...
目次1. はじめに2. 詳しい説明2.1、非同期2.1.1. 関数はPromise以外のオブジェクト...
1.1 ストレージエンジンの概要 1.1.1 ファイルシステムストレージファイル システム: オペ...
目次概要インデックスデータ構造バイナリツリー赤黒木BツリーB+ツリーハッシュ索引InnoDB インデ...
Mysqldump は MySQL の論理バックアップに使用されます。高速ではありませんが、柔軟性が...
1. Docker Secretとは1. シナリオ表示MySQL サービスなど、一部のサービスではパ...
序文Reduce は ES5 で追加された新しい従来の配列メソッドの 1 つです。forEach、f...
データの昇順、降順ソート1. フィールド名による単一フィールドのソート順機能:どのフィールドを基準に...
Toutiao IT School で、CSS がフロントエンドの画像変形の問題を完璧に解決するとい...