html5 캔버스 WeChat 포스터 공유 소개

이 글은 html5 canvas 위챗 포스터 공유(개인등산장)에 대한 자세한 설명을 중심으로 관련 정보를 소개하고 있으니 내용이 꽤 괜찮아서 참고용으로 올려드립니다.

이 기사에서는 캔버스 WeChat 포스터 공유를 소개하고 모든 사람과 공유합니다. 세부 사항은 다음과 같습니다.

1. 무작위로 그림 생성

2. WeChat 사용자의 아바타와 제목을 가져옵니다(백엔드 인터페이스를 조정하여 획득)

3. 사용자의 아바타와 제목을 무작위로 생성된 사진과 결합하여 포스터를 만드세요

4. 아마도 이전 페이지에 있는 사용자의 소원 텍스트도 그림에 채워져 있어야 할 것입니다

하려면 효과 다이어그램 달성

함수 구현 과정에서 발생한 문제 기록

1. Canvas는 WeChat 브라우저에서 길게 누르면 유효하지 않으며 img처럼 공유할 수 없습니다. img)

2. img로 변환한 후 WeChat 개발자 도구에서 표시할 수 있지만 실제 컴퓨터에서는 작동하지 않습니다(울고 싶지만 눈물이 나지 않을 수도 있음). 이미지는 크로스 도메인입니다^-^

3. 사용자 아바타 합성에도 둥근 모서리가 필요합니다. 아니요라고 했습니다. 캔버스 API 문서만 봤는데 사랑을 잃게 되었습니다

4. 텍스트가 캔버스가 지정된 너비를 초과하면 포장해야 합니다. 지정된 너비를 초과하지 않는 다양한 텍스트 정렬 방법만 알고 있다고 말했습니다. ctx.textAlign = 'center' ;

5. 캔버스가 흐려지는 문제 고화질 화면(매우 간단하고 Du Niang이 왜 그렇게 장황한지 모르겠습니다) 아닌가요 canvas.witdt=innerWidth*devicePixelRatio

HTML 구조

<p class="imgBox" v-cloak>
    <img  :src=&#39;imgSrc&#39; v-if="imgSrc" / alt="html5 캔버스 WeChat 포스터 공유 소개" >
</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();
        }
    }
})

그리기 방법 단계

1. drawCanvasBgImg ()

2. drawCanvasUserImg (canvas, ctx, dpr)

3. canvasFillText(캔버스, ctx, dpr, CircleR )

4. convertCanvasToImage(캔버스)

Draw 활동 페이지 공유 배경 이미지 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);
    }
},

캔버스에 텍스트 그리기

// 填写用户称呢或者用户留言
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);
},

위 내용은 모두의 학습에 도움이 되기를 바랍니다.

관련 추천:

캔버스는 동적인 작은 공이 겹쳐지는 효과 코드를 구현합니다.

캔버스는 사랑과 무지개 비의 효과를 구현합니다.

캔버스에 요소 그림 거울 뒤집기 애니메이션 효과를 구현하는 방법

위 내용은 html5 캔버스 WeChat 포스터 공유 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!