ミニ プログラムに画像コンポーネントを保存する機能を実装する手順を説明します。

この記事では、WeChat アプレット 保存画像コンポーネントの開発について説明します。皆さんのお役に立てれば幸いです。

多くの WeChat ミニ プログラムでは、ユーザーがポスターを保存することでアクティビティを共有し、より多くの人にミニ プログラムについて知らせることができます。私はミニ プログラムを開発しているときにこれに遭遇したはずです。バー。 [関連する学習の推奨事項: 小さなプログラム開発チュートリアル ]

今日は、会社で作成した小さなプログラムでポスターを保存する機能を共有します。まず、以前の社内のニーズがどのようなものだったのかをまず説明させていただきます。同社のオンライン ミニ プログラムは、新規ユーザーのプロモーションを長期的な目的としており、各ユーザーは独自のポスターを作成する必要があり、個人ポスターによるプロモーションは簡単な方法です。

私も課題を受けて、まずは調べ物をしようとユニバーサルインターネットに行ったのですが、先輩が「これと似たようなことをやったことがある」と教えてくれたんですが、その時は課題をこなすだけだったので、コードがとても汚かったので、彼は他のプロジェクトから始めました。私はコードを探して探して、ついに見つけました~~~しかし、私に与えられた時間は限られており、タスクは重いので、私が作らなければなりませんでしたいくつかの調整を行って最初に送信してください。その後、オンライン記事に従い、落とし穴を段階的に追跡し、ポスターを保存するためのコンポーネントを段階的に実装しました。

感想

まず、コンポーネントが uniapp を使用することを宣言しましょう。これは、具体的には、絵を描く、テキストを描く、ポスターをアルバムに保存するという基本的な機能を実装します。開発中に十分に使用されます。

キャンバスにポスターを描きます。 uni.canvasToTempFilePath を使用して、描画されたキャンバスを画像に変換します。 uni.saveImageToPhotosAlbum を使用して、携帯電話のアルバムへのローカル一時パスに写真を保存します。 私のアイデアは、使用されるすべてのメソッドをコンポーネントにカプセル化し、使用する必要があるメソッドを呼び出し、関連するパラメーターを調整するために親コンポーネントのみを使用することです。 具体的な使用方法については、サンプル コードをご覧ください。

キャンバスを介してポスター コンテンツを描画する順序

Promise を使用してポスター コンテンツを描画する順序を決定する物体。 promise.all() メソッドはキャンバス ペイント操作の最後のステップを実行します context.draw()

注 uni.getImageInfo()

• 画像とアバターを描画するとき、コンポーネントは uni.getImageInfo() を通じて画像の関連情報を取得します。このメソッドの呼び出しが成功するための前提条件は、ダウンロード ドメイン名とリクエスト ドメインであることです。名前は WeChat アプレットのバックグラウンドで設定する必要がありますが、エラーを防ぐために、uploadFile ドメイン名も一緒に設定することが最善です。ただし、公式のヒントではダウンロードドメイン名のホワイトリストを設定することになっていますが、画像情報が取得できないという大きな落とし穴があります。

• 関連する構成がない場合、デバッグ中または試用版、正式版などで vconsole デバッグ ツールが開きます。 uni.getImageInfo() は画像情報を取得できますが、vconsole を閉じると uni.getImageInfo() が失敗するという落とし穴もあります。

• canvasInfo オブジェクト (必須)
  ##canvasWidth キャンバスの幅
  canvasHeight キャンバスの高さ
  canvasId キャンバスの識別

  ##isFullScreen Boolean

• true の場合、キャンバスが携帯電話画面の全画面であることを意味し、canvasInfo で設定された幅と高さは無効になります。

  • デフォルトは false

  methods

• drawCanvasImage(context, src, _imageWidth, _imageHeight, dx, dy) Canvas に画像を描画します

• drawCircularAvatar(context, url, _circularX) , _circularY, _circularR) キャンバス上に円形の絵を描きます

• ##drawText(options) キャンバス上に単一行または複数行のテキストを描きます

• ## startDrawToImage(context 、promiseArr、callback) Draw() on Canvas

• posterToPhotosAlbum(filePath) 携帯電話のアルバムに保存

• サンプルコード

  ログイン後にコピー
  コンポーネント ソース コード

ログイン後にコピー

プログラミング入門

以上がミニ プログラムに画像コンポーネントを保存する機能を実装する手順を説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。