HTML5 キャンバス WeChat ポスターの共有の紹介

この記事は、HTML5 キャンバス WeChat ポスター共有 (個人登山ピット) の詳細な説明に関する関連情報を主に紹介します。内容は非常に優れているので、参考として共有します。

この記事では、キャンバス WeChat ポスター共有を紹介し、みんなで共有します。詳細は次のとおりです:

1. 写真をランダムに生成します

2. WeChat ユーザーのアバターとタイトルを取得します (バックエンド インターフェイスを調整して、入手してください)

3. ユーザーのアバターとタイトルをランダムに生成された写真と組み合わせてポスターにします

4. おそらく前のページのユーザーの願いのテキストも写真に記入する必要があります

効果図を達成します

機能の実装過程で遭遇した問題を記録します

1. WeChat ブラウザでキャンバスを長押しすると無効になり、img のように共有できません (その後、次のように変換します) img)

2. img に変換すると、WeChat 開発者ツールで表示できますが、実機では動作しません (泣きたいけど涙は出ない) のかもしれないと Du Niang 氏は言いました。画像はクロスドメインです^-^

3. ユーザーアバターの合成には角丸も必要です、私は「いいえ、キャンバス API ドキュメントを見たところですが、Du Niang には愛着がありません」と言いました

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" />
</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 (canvas、ctx、dpr、circleR)

4. convertCanvasToImage (canvas)

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)

りー

Canvas にテキストを描画します

// 在背景图片的画布上截取一个圆然后填充入用户头像
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);
    }
},

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

動的ボールオーバーラップエフェクトコードを実現するキャンバス

愛と虹の雨のエフェクトを実現するキャンバス

キャンバスに要素画像のミラー反転アニメーション効果を実装する方法

以上がHTML5 キャンバス WeChat ポスターの共有の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。