partage d'affiches WeChat sur toile html5

Cet article présente principalement les informations pertinentes sur l'explication détaillée du partage d'affiches WeChat sur toile html5 (fosse d'escalade personnelle). L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

1. Générer aléatoirement une image

2. Obtenez l'avatar et le titre de l'utilisateur WeChat (ajustez l'interface back-end pour l'obtenir par vous-même)

3. Combinez l'avatar et le titre de l'utilisateur avec une image générée aléatoirement dans une affiche

4. Peut-être que l'utilisateur de la page précédente a également rempli le souhait texte. Remplissez l'image

pour réaliser le rendu

Enregistrez les problèmes rencontrés lors du processus de mise en œuvre de la fonction

1. Canvas n'est pas valide lorsqu'il est enfoncé longuement dans le navigateur WeChat et ne peut pas être partagé comme img (alors Je vais le convertir en img)

2. peut être affiché dans les outils de développement WeChat après avoir été converti en img, mais cela ne fonctionnera pas sur un vrai appareil (je veux pleurer sans larmes) . Du Niang a dit qu'il se peut que l'image soit inter-domaines ^-^

3. La synthèse de l'avatar de l'utilisateur nécessite également des coins arrondis, j'ai dit non, je viens de regarder le document API du canevas. et je n'aime pas Du Niang

4. toile Si le texte dépasse la largeur spécifiée, il doit être enveloppé. Je ne connais que les différentes méthodes d'alignement du texte qui ne dépassent pas la largeur spécifiée ctx. .textAlign = 'center' ;

5. canvas sous écran haute définition La question vague (c'est super simple et je ne sais pas pourquoi Du Niang est si verbeux) est canvas.witdt= innerWidth*devicePixelRatio

Structure HTML

<p class="imgBox" v-cloak>
    <img :src=&#39;imgSrc&#39; 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

// 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();
        }
    }
})

Étapes de la méthode de dessin

1. drawCanvasBgImg ()

2. drawCanvasUserImg (canvas, ctx, dpr)

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

4. convertCanvasToImage (canvas)

Activité de dessin Partage de page image d'arrière-plan 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);
    }
},

Avatar de l'utilisateur 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);
    }
},

Dessiner du texte dans 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 = &#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);
},

Recommandations associées :

JQuery et CSS3 partagent un exemple de mise en œuvre de l'effet de parallaxe d'affiche APPLE TV

Partagez un projet mobile qui utilise Canvas pour synthétiser des images d'affiches

Utilisez PHP pour envoyer des affiches de code QR avec des arrière-plans personnalisés, des avatars et des messages texte et WeChat contenant des invites

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!