欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-16 17:11:10
这篇文章主要介绍了详解html5 canvas 微信海报分享(个人爬坑)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧... 18-01-12...

本文介绍了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在高清屏下模糊的问题(超简单的不知道度娘怎么会那么啰嗦)不就是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();
        }
    }
})

画图方法步骤

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

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