本文介绍了canvas 微信海报分享，分享给大家，具体如下：
实现效果图
记录下在实现功能过程中遇到的问题
html结构
我要评论
<div class="imgbox" v-cloak>
<img :src='imgsrc' v-if="imgsrc" />
</div>
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 ()
//拿到数据后开始画背景大图 想法很简单就是把图片画到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);
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
html5 datalist 选中option选项后的触发事件
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 （附转换公式）
网友评论