html5 canvas 微信海报分享
导读：收集整理的这篇文章主要介绍了html5 canvas 微信海报分享，觉得挺不错的，现在分享给大家，也给大家做个参考。本文主要介绍了详解HTML5 canvas 微信海报分享（个人爬坑）的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做...
收集整理的这篇文章主要介绍了html5 canvas 微信海报分享，觉得挺不错的，现在分享给大家，也给大家做个参考。本文主要介绍了详解HTML5 canvas 微信海报分享（个人爬坑）的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。随机产生一张图片
拿到微信用户的头像和称呢（自己调后端的接口获取）
把用户头像和称呢和随机产生一张图片合成一张海报
可能上一页用户还有填入的心愿文本也要填入图片中
实现效果图
记录下在实现功能过程中遇到的问题
canvas在微信浏览器中长按无效不能像img一样长按分享（那我就转成img呗）
转成img后在微信开发者工具中能显示，真机无效（欲哭无泪），度娘说可能是图片跨域^-^
用户头像合成还要圆角，我表示不会啊，直接看canvas api文档了对度娘无爱了
canvas填入文字超过指定宽度也要换行，我表示只知道不超多指定宽度的各种文字对齐方式 ctx.textAlign = 'center' ;
canvas在高清屏下模糊的问题（超简单的不知道度娘怎么会那么啰嗦）不就是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)
convertCanvasToImage (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);
}
}
,在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海报视差效果实例分享
分享一个用canvas合成海报图片的移动端项目
使用php发送自定义背景、头像、文字的二维码海报并含有提示的微信消息
以上就是html5 canvas 微信海报分享的详细内容，更多请关注其它相关文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： html5 canvas 微信海报分享
本文地址： https://pptw.com/jishu/583775.html