html5canvas微信海报分享-

本文主要介绍了详解html5canvas微信海报分享（个人爬坑）的相干材料,小编觉得挺不错的，此刻分享给大家，也给大家做个参照 。一起追随小编过来看看吧，但愿能帮忙到大家。 本文主要介绍了详解html5 canvas 微信海报分享（个人爬坑）的相干材料,小编觉得挺不错的，此刻分享给大家，也给大家做个参照 。一起追随小编过来看看吧，但愿能帮忙到大家。

1. 随机发生一张图片

2. 拿到微信誉户的头像和称呢（本人调后端的接口猎取）

3. 把会员头像和称呢和随机发生一张图片合成一张海报

4. 可能上一页会员还有填入的心愿文本也要填入图片中

CSS

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