html5 캔버스 WeChat 포스터 공유
- 小云云원래의
- 2018-01-15 09:51:204051검색
이 글은 html5 캔버스 위챗 포스터 공유(개인등산장)에 대한 자세한 설명에 관련 내용을 주로 소개하고 있어서 편집자께서 꽤 좋다고 생각하셔서 지금 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
무작위로 사진 생성
WeChat 사용자의 아바타와 제목 가져오기(얻으려면 백엔드 인터페이스 조정)
사용자의 아바타와 제목을 무작위로 생성된 사진과 결합하여 포스터 만들기
-
아마도 이전 페이지의 사용자가 사진에 채워야 할 소원 텍스트를 입력했을 수도 있습니다
구현 렌더링
함수 구현 중에 발생한 문제를 기록하세요.
img와 같은 WeChat 브라우저에서는 길게 눌러 캔버스를 공유할 수 없습니다(그런 다음 img로 변환합니다)
img로 변환한 후 WeChat 개발자 도구, 실제 시스템에 표시될 수 있습니다. 울지만 눈물은 없음), Du Niang은 도메인 간 이미지일 수 있다고 말했습니다. ^-^
-
사용자 아바타 합성에는 둥근 모서리가 필요합니다. 저는 아니라고 말했습니다. 그냥 캔버스 API 문서를 읽으세요. 저는 Du를 사랑하지 않습니다. 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(캔버스, 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);
}
},텍스트 그리기 in canvas
// 填写用户称呢或者用户留言
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를 사용하여 맞춤형 배경, 아바타, 텍스트가 포함된 QR 코드 포스터와 팁을 보내보세요
위 내용은 html5 캔버스 WeChat 포스터 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!