详解html5 canvas 微信海报分享(个人爬坑)

详解html5 canvas 微信海报分享(个人爬坑)

  发布时间:2018-01-12 15:10:18   作者:kangchangyuan    我要评论这篇文章主要介绍了详解html5 canvas 微信海报分享(个人爬坑)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

本文介绍了canvas 微信海报分享,分享给大家,具体如下:

  1. 随机产生一张图片
  2. 拿到微信用户的头像和称呢(自己调后端的接口获取)
  3. 把用户头像和称呢和随机产生一张图片合成一张海报
  4. 可能上一页用户还有填入的心愿文本也要填入图片中

实现效果图

记录下在实现功能过程中遇到的问题

  1. canvas在微信浏览器中长按无效不能像img一样长按分享(那我就转成img呗)
  2. 转成img后在微信开发者工具中能显示,真机无效(欲哭无泪),度娘说可能是图片跨域^-^
  3. 用户头像合成还要圆角,我表示不会啊,直接看canvas api文档了对度娘无爱了
  4. canvas填入文字超过指定宽度也要换行,我表示只知道不超多指定宽度的各种文字对齐方式 ctx.textAlign = ‘center’ ;
  5. canvas在高清屏下模糊的问题(超简单的不知道度娘怎么会那么啰嗦)不就是canvas.witdt=innerWidth*devicePixelRatio

HTML结构

123<div class="imgBox" v-cloak><img :src='imgSrc' v-if="imgSrc" /></div>

CSS

12345678910111213141516171819202122<style>*{margin:0;padding:0;}body,html {width: 100%;height: 100%;} .imgBox {width: 100%;height: 100%; } img {width: 100%;display: block;}</style>

script

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869// 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();}}})

画图方法步骤

  1. drawCanvasBgImg ()
  2. drawCanvasUserImg (canvas, ctx, dpr)
  3. canvasFillText (canvas, ctx, dpr, circleR)
  4. convertCanvasToImage (canvas)

画活动页分享背景大图 drawCanvasBgImg ()

123456789101112131415161718//拿到数据后开始画背景大图 想法很简单就是把图片画到canvas中然后在画布上再画头像文字让后转成imgdrawCanvasBgImg () {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还是不能让图片满屏直接多加到了609var 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)

123456789101112131415161718192021// 在背景图片的画布上截取一个圆然后填充入用户头像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中画文字

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647// 填写用户称呢或者用户留言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);},

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

发表评论

电子邮件地址不会被公开。