当前位置:Gxlcms > html代码 > html5canvas微信海报分享

html5canvas微信海报分享

时间:2021-07-01 10:21:17 帮助过:109人阅读

本文主要介绍了详解html5 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结构


<p class="imgBox" v-cloak>
    <img :src='imgSrc' v-if="imgSrc" />
</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


画图方法步骤

  1. drawCanvasBgImg ()

  2. drawCanvasUserImg (canvas, ctx, dpr)

  3. canvasFillText (canvas, ctx, dpr, circleR)

  4. convertCanvasToImage (canvas)

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


用户头像 drawCanvasUserImg (canvas, ctx, dpr)


在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);
},

相关推荐:

jQuery和CSS3实现APPLE TV海报视差效果实例分享

分享一个用canvas合成海报图片的移动端项目

使用php发送自定义背景、头像、文字的二维码海报并含有提示的微信消息

以上就是html5 canvas 微信海报分享的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行