小李飞刀资源网 Design By www.iooab.com
本文介绍了canvas 微信海报分享,分享给大家,具体如下:
- 随机产生一张图片
- 拿到微信用户的头像和称呢(自己调后端的接口获取)
- 把用户头像和称呢和随机产生一张图片合成一张海报
- 可能上一页用户还有填入的心愿文本也要填入图片中
实现效果图
记录下在实现功能过程中遇到的问题
- canvas在微信浏览器中长按无效不能像img一样长按分享(那我就转成img呗)
- 转成img后在微信开发者工具中能显示,真机无效(欲哭无泪),度娘说可能是图片跨域^-^
- 用户头像合成还要圆角,我表示不会啊,直接看canvas api文档了对度娘无爱了
- canvas填入文字超过指定宽度也要换行,我表示只知道不超多指定宽度的各种文字对齐方式 ctx.textAlign = 'center' ;
- canvas在高清屏下模糊的问题(超简单的不知道度娘怎么会那么啰嗦)不就是canvas.witdt=innerWidth*devicePixelRatio
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 ()
- 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); },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
小李飞刀资源网 Design By www.iooab.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
小李飞刀资源网 Design By www.iooab.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]