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


Posted in HTML / CSS onJanuary 12, 2018

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

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

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

实现效果图

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

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

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

画图方法步骤

  1. drawCanvasBgImg ()
  2. drawCanvasUserImg (canvas, ctx, dpr)
  3. canvasFillText (canvas, ctx, dpr, circleR)
  4. 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);
},

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

HTML / CSS 相关文章推荐
使用css3绘制出各种几何图形
Aug 17 HTML / CSS
纯CSS实现的大小渐变、渐远效果
Apr 15 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 HTML / CSS
HTML5打开本地app应用的方法
Mar 31 HTML / CSS
HTML5实现视频直播功能思路详解
Nov 16 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
May 17 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 HTML / CSS
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
Aug 07 HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 #HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 #HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 #HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
Jan 10 #HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 #HTML / CSS
H5混合开发app如何升级的方法
Jan 10 #HTML / CSS
浅谈关于html5中图片抛物线运动的一些心得
Jan 09 #HTML / CSS
You might like
php实现统计目录文件大小的函数
2015/12/25 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
在react中使用vuex的示例代码
2018/07/30 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
Python实现的求解最大公约数算法示例
2018/05/03 Python
详解python里的命名规范
2018/07/16 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
python如何删除文件、目录
2020/06/23 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
《挑山工》的教学反思
2014/02/16 职场文书
2015年企业新年寄语
2014/12/08 职场文书
出租车拒载检讨书
2015/01/28 职场文书
最感人的道歉情书
2015/05/12 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书