关于html5 canvas 微信海报的分享介绍

百变鹏仔 2个月前 (10-18) #H5教程

文章标签海报

这篇文章主要介绍了详解html5 canvas 微信海报分享（个人爬坑）的相关资料,内容挺不错的，现在分享给大家，也给大家做个参考。

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

随机产生一张图片
拿到微信用户的头像和称呢（自己调后端的接口获取）
把用户头像和称呢和随机产生一张图片合成一张海报
立即学习“前端免费学习笔记（深入）”；
可能上一页用户还有填入的心愿文本也要填入图片中

实现效果图

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

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

HTML结构

<p class="imgBox" v-cloak>    <img  :src=&#39;imgSrc&#39; v-if="imgSrc" / alt="关于html5 canvas 微信海报的分享介绍" ></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:&#39;imgBox&#39;,    data:{        urlParam: {},//获取url中的传值对象        randomNum: 1,//随机数用于确定那个祈福页        userName: &#39;&#39;,//用户称呢        imgSrc: &#39;&#39;,//合成最终图片        userImg: &#39;&#39;,//用户头像图片        userMessage: &#39;&#39;,//用户留言    },    methods: {        // 分享到盆友圈        wxShareFriends: function () {},        // 初始化请求头        wxHttp: function () {            $.ajaxSetup({                headers: {                &#39;X-CSRF-TOKEN&#39;: $(&#39;meta[name="csrf-token"]&#39;).attr(&#39;content&#39;)                }            });        },        // 获取随机数[1,10]        randomNumbers() {            this.randomNum = Math.ceil(Math.random() * 10)        },        // 获取微信用户头像和称呢和用户输入祝福语        getUserInfo() {            var vm = this;            $.post(&#39;API请求地址&#39;, function (data) {                if (data.code == 1) {                    vm.userImg = data.data.headimg;                    vm.userName = data.data.nickname;                    if (vm.randomNum % 2 == 0) {                        vm.userMessage= &#39;红尘相遇，年华已老。岁月花开多少不在，古往今来相遇是一件既微妙。而又神圣的事情，红尘的情网中&#39;                    } else {                        vm.userMessage = &#39;红尘相遇，年华已老&#39;                    }                }                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 = &#39;&#39;;//死坑的图片跨域 （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 = &#39;&#39;;    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 + &#39;px&#39; + &#39; Arial&#39;;    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 = &#39;center&#39;;        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 = &#39;left&#39;;                    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 = &#39;center&#39;;            ctx.fillText(this.userMessage, canvas.width / 2, userMessageY);        }    }    this.convertCanvasToImage(canvas);},

文章推荐

关于html5 canvas 微信海报的分享介绍

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集