ホームページ > 記事 > ウェブフロントエンド > html5 キャンバス WeChat ポスター共有
html5 キャンバス WeChat ポスター共有
- 小云云オリジナル
- 2018-01-15 09:51:203997ブラウズ
この記事は、HTML5キャンバスWeChatポスター共有の詳細な説明（個人的な登山ピット）に関する関連情報を主に紹介します。編集者はそれが非常に優れていると思うので、今すぐ共有して参考にします。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
画像をランダムに生成します
WeChat ユーザーのアバターとタイトルを取得します (バックエンド インターフェイスを調整して取得します)
ユーザーのアバターとタイトルをランダムに生成された画像と組み合わせてポスターを作成します
-
前のページのユーザーが、画像に記入する必要があるウィッシュテキストも記入した可能性があります
実装レンダリング
関数の実装中に発生した問題を記録します
CanvasはWeChatブラウザでimgのように長押ししても共有できません（その後imgに変換します）
imgに変換後はWeChat開発者ツール、実機で表示可能です 無効（欲しい）泣くけど涙は出ない）、ドゥ・ニアンは、それは画像のクロスドメインかもしれないと言った^-^
-
ユーザーアバターの合成には角を丸くする必要がある、私はノー、キャンバスAPIドキュメントを読んでくださいと言いました、私はドゥに愛はありませんNiang
テキストが指定された幅を超える場合は、キャンバスを折り返す必要があります。私は、指定された幅を超えないさまざまなテキスト配置方法しか知りません。 ctx.textAlign = 'center' ;
キャンバスは高解像度でぼやけます。定義画面 (とてもシンプルです。Du Niang がなぜそんなに冗長なのかわかりません。) Canvas.witdt=innerWidth*devicePixelRatio
HTML 構造
<p class="imgBox" v-cloak>
<img :src='imgSrc' v-if="imgSrc" />
</p>CSS
だけではないでしょうか。
<style>
*{
margin:0;
padding:0;
}
body,
html {
width: 100%;
height: 100%;
}
.imgBox {
width: 100%;
height: 100%;
}
img {
width: 100%;
display: block;
}
</style>script
// js主要结构
new Vue({
el:'imgBox',
data:{
urlParam: {},//获取url中的传值对象
randomNum: 1,//随机数用于确定那个祈福页
userName: '',//用户称呢
imgSrc: '',//合成最终图片
userImg: '',//用户头像图片
userMessage: '',//用户留言
},
methods: {
// 分享到盆友圈
wxShareFriends: function () {},
// 初始化请求头
wxHttp: function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
},
// 获取随机数[1,10]
randomNumbers() {
this.randomNum = Math.ceil(Math.random() * 10)
},
// 获取微信用户头像和称呢和用户输入祝福语
getUserInfo() {
var vm = this;
$.post('API请求地址', function (data) {
if (data.code == 1) {
vm.userImg = data.data.headimg;
vm.userName = data.data.nickname;
if (vm.randomNum % 2 == 0) {
vm.userMessage= '红尘相遇，年华已老。岁月花开多少不在，古往今来相遇是一件既微妙。而又神圣的事情，红尘的情网中'
} else {
vm.userMessage = '红尘相遇，年华已老'
}
}
vm.$nextTick(function () {
vm.drawCanvasBgImg();
})
})
},
// 获取页面dpr和宽度
getWindowInfo() {
var windowInfo = {};
windowInfo.dpr = window.devicePixelRatio;
if (window.innerWidth) {
windowInfo.width = window.innerWidth;
}
else {
windowInfo.width = document.body.clientWidth;
}
return windowInfo;
},
// 画活动页分享背景大图
drawCanvasBgImg () {},
// 在背景图片的画布上截取一个圆然后填充入用户头像
drawCanvasUserImg(canvas, ctx, dpr) {},
// 填写用户称呢或者用户留言
canvasFillText (canvas, ctx, dpr, circleR) {},
// 合成base64位分享图
convertCanvasToImage (canvas) {
this.imgSrc = canvas.toDataURL("image/jpeg");//png有毒在安卓机下识别二维码无法跳转
this.$Spin.hide();
}
}
})描画方法手順
drawCanvasBgImg ()
drawCanvasUserImg (canvas, ctx, dpr)
-
canvasFillText (canvas、ctx、dpr、circleR)
con vertCanvasToImage (canvas)
背景を共有する描画アクティビティページの大きな画像drawCanvasBgImg ()
//拿到数据后开始画背景大图 想法很简单就是把图片画到canvas中然后在画布上再画头像文字让后转成img
drawCanvasBgImg () {
var vm = this;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var clientWidth = this.getWindowInfo().width; //获取屏幕宽度用于canvas宽度自适应移动端屏幕
var dpr = this.getWindowInfo().dpr;
ctx.globalCompositeOperation = "source-atop";//** 坑锯齿感觉没什么用不知道是不是用错地方了 **
canvas.width = dpr * clientWidth; //由于手机屏幕时retina屏，都会多倍渲染，用dpr来动态设置画布宽高，避免图片模糊
canvas.height = dpr * clientWidth * 609 / 375;//去掉微信头部的状态栏应该是603 没搞懂603还是不能让图片满屏直接多加到了609
var img = new Image();
img.crossOrigin = '';//死坑的图片跨域 （img.crossOrigin = "Anonymous"这种写法还是不能显示base64格式图片）
img.src = "http://xxx" + this.randomNum + ".jpg";
img.onload = function () {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
vm.drawCanvasUserImg(canvas, ctx, dpr);
}
},ユーザーアバターdrawCanvasUserImg (canvas, ctx, dpr)
// 在背景图片的画布上截取一个圆然后填充入用户头像
drawCanvasUserImg: function (canvas, ctx, dpr) {
var vm = this;
var circleR = 50 * dpr;//半径
var circleX = canvas.width / 2;//圆心X坐标
var circleY = 50 * dpr;//圆心Y坐标
var imgX = circleX - circleR;//图片X开始坐标
var imgY = circleY - circleR;//图片Y开始坐标
var imgWidth = 2 * circleR;//图片按圆形大小
var img = new Image();
img.crossOrigin = '';
img.src = this.userImg;
img.onload = function () {
ctx.save(); // 保存当前ctx的状态
ctx.arc(circleX, circleY, circleR, 0, 2 * Math.PI); //画出圆
ctx.clip(); //裁剪上面的圆形
ctx.drawImage(img, imgX, imgY, imgWidth, imgWidth); // 在刚刚裁剪的园上画图
ctx.restore(); // 还原状态
vm.canvasFillText(canvas, ctx, dpr, circleR);
}
},テキストを描くキャンバス内
// 填写用户称呢或者用户留言
canvasFillText (canvas, ctx, dpr, circleR) {
var fontSizeThis = dpr * 20 + 'px' + ' Arial';
var userNameY = 0;//用户名Y轴坐标
var userMessageX = dpr * 40;//用户留言X轴坐标
var userMessageY = 0;//用户留言Y轴坐标
var lastSubStrIndex = 0;//字符串下标
var lineWidth = 0;//一行宽度
var allTextWidth = 0;//所有字符宽度
ctx.font = fontSizeThis;
// 需要用户名是写入用户名
if (this.userName) {
userNameY = circleR * 2.5;
ctx.fillStyle = "#0094ff";
ctx.textAlign = 'center';
ctx.fillText(this.userName, canvas.width / 2, userNameY);
}
if (this.userMessage) {
userMessageY = userNameY + dpr * 35;
ctx.fillStyle = "#000";
// 获取字符宽度
for (var i = 0; i < this.userMessage.length; i++) {
allTextWidth += ctx.measureText(this.userMessage[i]).width;
}
// 字符串长度大于画布区域要换行
if (allTextWidth > canvas.width - 2* userMessageX) {
for (var i = 0; i < this.userMessage.length; i++) {
lineWidth += ctx.measureText(this.userMessage[i]).width;
if (lineWidth > canvas.width - 2*userMessageX) {
ctx.textAlign = 'left';
ctx.fillText(this.userMessage.substring(lastSubStrIndex, i), userMessageX, userMessageY);
userMessageY += dpr * 25;//设置行高
lineWidth = 0;
lastSubStrIndex = i;
}
if (i == this.userMessage.length - 1) {
ctx.fillText(this.userMessage.substring(lastSubStrIndex, i + 1), userMessageX, userMessageY);
}
}
} else {
// 小于者居中显示
ctx.textAlign = 'center';
ctx.fillText(this.userMessage, canvas.width / 2, userMessageY);
}
}
this.convertCanvasToImage(canvas);
},関連する推奨事項:
jQuery と CSS3 が APPLE TV ポスターの視差効果の実装例を共有します
キャンバスを使用してポスター画像を合成するモバイル プロジェクトを共有します
PHP を使用してカスタマイズされた背景、アバター、ヒント付きの WeChat メッセージを含む QR コード ポスターを送信します
。以上がhtml5 キャンバス WeChat ポスター共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。