計画を比較する
おそらく、多くの人は小さなプログラムを書くときに厄介な機能に遭遇するでしょう-モーメントの写真を生成して共有することです。友達の輪の中で写真を生成するために一般的に使用されるいくつかのスキームがあります：
- キャンバスを使用して描画および生成
- バックエンドの描画ライブラリを使用して、描画してアプレットに戻ります
- サーバーを使用してHTMLレンダリング用のブラウザーを開き、スクリーンショットをアプレットに返します
最初の解決策：より高い要件、キャンバス、純粋なhtmlレイアウトは遠く、ゼロベースの学習のコストは高く、さまざまなWeChatブラウザーでその影響は予測できません。美しく、制御可能な生成画像を短時間で作成するのは簡単ではありません。時間。簡単。実際の操作中に、非常に厄介なことがわかりました。ネットワークイメージもbase64イメージも、キャンバスに直接レンダリングして表示することはできず、最初にダウンロードして渡す必要があります。
2番目の解決策：バックエンドライブラリは比較的単純な要件を満たすことができますが、フォントの読み込み、影、角の丸み、透明度などの効果を微調整する必要があります。テキストを切り捨てたり動的に拡大したりする必要がある場合は、扱いが簡単ではありません。画像のキャプチャとスケーリングも柔軟ではありません。さらに、このソリューションを選択することは、UIレイアウト作業をバックエンドエンジニアに任せて解決することと同じですが、これは彼らの専門分野ではなく、効果が良くない可能性があります。
3番目の解決策：ページの描画に関しては、純粋なフロントエンドテクノロジーを簡単に完了でき、完了度も高くなりますが、サーバー側を制御するためにpuppeteerを開くには、バックエンドでノードサービスを開始する必要があります。 Chromeブラウザ。このソリューションの欠点は、コストが高すぎることです。業界の同業者と測定した結果は同様です。4コア16Gサーバーで生成された画像のQPSは約10〜20であり、これはこれは、1秒間に10枚の画像しか生成できないことに相当します。これは、大量の共有に対する突然の需要に対応できず、この構成のサーバーは他のサービスを展開できず、このサービスを実行するだけでほとんどのリソースが消費されます。 。
バックグラウンド
私たちのプロジェクトの最初のバージョンでは、最初のソリューションであるキャンバスの描画を採用しました。学習コストが高いことは言うまでもなく、オンラインで公開したときに互換性の問題がありました。そのため、第2版を開発する際に、他の誰かが作成したプラグインを見つけることを検討しました。GitHubで、mp-vueフレームワークのオープンソースプロジェクトペインターを見つけました。プロジェクトがmp-vueでビルドされている場合は、試す。しかし、私たちのアプレットはuniappを使用しています。これは、uniappにmp-vueコンポーネントを導入する方法がわからなかったため、このソリューションをあきらめました。それをもう一度探した後、DCloudプラグイン市場で、私はついにそれを見つけました-ポスターアートボード。このプラグインは非常に使いやすく、最初から使用するまでの手順を書き留めておきます。
ポスターボードの使い方
- プラグインをインポートする
- プラグインをインポートすると、プロジェクトファイルのuni_modulesディレクトリにインポートされ、必要な場所に直接インポートできます。
3.プラグインの特定の使用法はここでは繰り返されません。
添付ファイル:(ポスターをbase64形式で描画する場合は、ローカルの一時的な画像に変換する必要があります）
dealBase64(imageData) {
return new Promise((reslove, reject) => {
// 如果图片字符串不含要清空的前缀,可以不执行下行代码.
// var imageData = base64.replace(/^data:image\/\w+;base64,/, "");
// 声明文件系统
const fs = uni.getFileSystemManager();
// 随机定义路径名称
var times = new Date().getTime();
var codeimg = wx.env.USER_DATA_PATH + '/share' + times + '.png';
// 将base64图片写入
var that = this;
fs.writeFile({
filePath: codeimg,
data: imageData,
encoding: 'base64',
success: (res) => {
// 写入成功了的话，新的图片路径就能用了
reslove(codeimg);
}
});
})
}
复制代码