モバイル共有ポスターの生成
最近、プロジェクトの需要は、製品共有ポスターを生成し、それを携帯電話に保存して、H5およびアプレットと互換性を持たせることです。
バックエンドのクラスメートとコミュニケーションをとった後、ポスターはフロントエンドで生成され、最もパフォーマンスが低く、インタラクティブなエクスペリエンスが向上します。まず、良い仕事をすることの効果を見てください。
フロントエンドフレームワークは、ユニアプリを使用してH5や小さなプログラムに簡単にパッケージ化できます。
実装ソリューションは、バックエンドから返されたデータを取得し、キャンバスキャンバスを使用してデータをまとめ、画像を生成することです。
メインパラメータは次のとおりです。背景画像、製品画像、QRコード、価格、元の価格、タイトル
製品画像とQRコードを取得したら、それらをダウンロードする必要があります。uni-appAPIを使用
して、ダウンロードメソッドを記述しtemplate、キャンバスコンポーネントを定義します。
<template>
<canvas class="canvas" canvas-id="myCanvas" v-if="canvasStatus"></canvas>
</template>
onReady(){
this.downloadFileImg('','pic');
this.downloadFileImg('','code');
},
methods:{
downloadFileImg(url,name){
let self = this
uni.downloadFile({
url: url,
success: function(res) {
self[name] = res.tempFilePath;
},
fail: function(erros) {
console.log(error)
}
});
}
}このようにして、画像は一時的にローカルの一時ファイルに保存されます
uni.downloadFile
各アプレットプラットフォームが実行されている場合、ネットワーク関連のAPIは、使用する前にドメイン名のホワイトリストで構成する必要があることに注意してください。これはh5のクロスドメインであり、ユーザーはクロスドメインの問題を処理する必要があります。
キャンバスが画像を生成する方法を書き留めます
/**
* 获取分享海报
* @param array imgArr 海报素材 0 背景图 1商品图 2二维码
* @param string store_name 素材文字
* @param string price 价格
* @param string ot_price 原始价格
* @param function successFn 回调函数
*/
PosterCanvas: function(imgArr, store_name, price, ot_price, successFn) {
let that = this;
uni.showLoading({
title: '海报生成中',
mask: true
});
const ctx = uni.createCanvasContext('myCanvas');
ctx.clearRect(0, 0, 0, 0);
/**
* 只能获取合法域名下的图片信息,本地调试无法获取
*
*/
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, 750, 1150);
uni.getImageInfo({
src: imgArr[0],
success: function(res) {
const WIDTH = res.width;
const HEIGHT = res.height;
ctx.drawImage(imgArr[1], 0, 0, WIDTH, WIDTH);
ctx.save();
let r = 110;
let d = r * 2;
let cx = 480;
let cy = 790;
ctx.arc(cx + r, cy + r, r, 0, 2 * Math.PI);
// ctx.clip();
ctx.drawImage(imgArr[2], cx, cy, d, d);
ctx.restore();
const CONTENT_ROW_LENGTH = 20;
let [contentLeng, contentArray, contentRows] = that.textByteLength(store_name, CONTENT_ROW_LENGTH);
if (contentRows > 2) {
contentRows = 2;
let textArray = contentArray.slice(0, 2);
textArray[textArray.length - 1] += '……';
contentArray = textArray;
}
ctx.setTextAlign('left');
ctx.setFontSize(36);
ctx.setFillStyle('#000');
// let contentHh = 36 * 1.5;
let contentHh = 36;
for (let m = 0; m < contentArray.length; m++) {
if (m) {
ctx.fillText(contentArray[m], 50, 1000 + contentHh * m + 18, 1100);
} else {
ctx.fillText(contentArray[m], 50, 1000 + contentHh * m, 1100);
}
}
ctx.setTextAlign('left')
ctx.setFontSize(72);
ctx.setFillStyle('#DA4F2A');
ctx.fillText('￥' + price, 40, 820 + contentHh);
ctx.setTextAlign('left')
ctx.setFontSize(36);
ctx.setFillStyle('#999');
ctx.fillText('￥' + ot_price, 50, 876 + contentHh);
var underline = function(ctx, text, x, y, size, color, thickness, offset) {
var width = ctx.measureText(text).width;
switch (ctx.textAlign) {
case "center":
x -= (width / 2);
break;
case "right":
x -= width;
break;
}
y += size + offset;
ctx.beginPath();
ctx.strokeStyle = color;
ctx.lineWidth = thickness;
ctx.moveTo(x, y);
ctx.lineTo(x + width, y);
ctx.stroke();
}
underline(ctx, '￥' + ot_price, 55, 865, 36, '#999', 2, 0)
ctx.setTextAlign('left')
ctx.setFontSize(28);
ctx.setFillStyle('#999');
ctx.fillText('长按或扫描查看', 490, 1030 + contentHh);
ctx.draw(true, function() {
uni.canvasToTempFilePath({
canvasId: 'myCanvas',
fileType: 'png',
destWidth: WIDTH,
destHeight: HEIGHT,
success: function(res) {
uni.hideLoading();
successFn && successFn(res.tempFilePath);
}
})
});
},
fail: function(err) {
uni.hideLoading();
that.Tips({
title: '无法获取图片信息'
});
}
})
},まず作成canvas<BR>キャンバス
、背景画像情報を取得し、幅と高さを取得し、その後、製品のイメージを描き、<BR>それを保存し
、次のQRコードを描画し、座標を配置して保存。<BR>
を扱っている間テキストの折り返しとサイズの設定の問題色とその方法<br>
対応する価格の色とサイズ、元の価格、および座標を設定します。<br>
価格には横線があるため、検索しました。インターネット上の水平線とメソッドを見たところです。<br>
最後に画像情報を生成し、uni.canvasToTempFilePathメソッドを使用して現在のキャンバスの指定された領域のコンテンツをエクスポートして、指定されたサイズの画像を生成し、ファイルを返します道。<br>
このようにして、一時的な.pngファイルを取得します。これで、ファイルをコンポーネントにレンダリングする最後のステップがあります。コールバック関数から、<br>に戻ることができます。
このメソッドは、たとえば、パブリックメソッドInsideで記述し、後で使用できるようにvueプロトタイプにバインドします<br>
次に、メソッド呼び出しを記述します
handelCanvas(){
let imgArr = ['背景图路径',this.pic,this.code]
this.$util.PosterCanvas(imgArr,'标题','价格','原价',function(tempFilePath){
console.log(tempFilePath)
})
}このように、生成された画像は一時ファイルです。ページに置いて表示します。
画像保存機能H5を長押しすると、画像を保存できます。ここでは、小さなプログラムのみを使用します。
まず、認証を確認して呼び出します。認証を取得した後のuni.-appのapiは問題ありません
savePosterPath: function() {
let that = this;
uni.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
uni.authorize({
scope: 'scope.writePhotosAlbum',
success() {
uni.saveImageToPhotosAlbum({
filePath: 'canvas生成的临时图片',
success: function(res) {
....成功了
},
fail: function(res) {
....失败了
}
});
}
});
} else {
uni.saveImageToPhotosAlbum({
filePath: 'canvas生成的临时图片',
success: function(res) {
....成功了
},
fail: function(res) {
....失败了
}
});
}
}
});
},このようにしてフロントエンドのポスター生成が完了しましたが、それを放棄しましたか？