html5中canvas微信海報(bào)的示例分析

這篇文章主要介紹了html5中canvas微信海報(bào)的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

本文介紹了canvas 微信海報(bào)分享，分享給大家，具體如下：

1. 隨機(jī)產(chǎn)生一張圖片

2. 拿到微信用戶的頭像和稱呢（自己調(diào)后端的接口獲?。?/p>

3. 把用戶頭像和稱呢和隨機(jī)產(chǎn)生一張圖片合成一張海報(bào)

4. 可能上一頁(yè)用戶還有填入的心愿文本也要填入圖片中

實(shí)現(xiàn)效果圖

記錄下在實(shí)現(xiàn)功能過(guò)程中遇到的問(wèn)題

1. canvas在微信瀏覽器中長(zhǎng)按無(wú)效不能像img一樣長(zhǎng)按分享（那我就轉(zhuǎn)成img唄）

2. 轉(zhuǎn)成img后在微信開(kāi)發(fā)者工具中能顯示，真機(jī)無(wú)效（欲哭無(wú)淚），度娘說(shuō)可能是圖片跨域^-^

3. 用戶頭像合成還要圓角，我表示不會(huì)啊，直接看canvas api文檔了對(duì)度娘無(wú)愛(ài)了

4. canvas填入文字超過(guò)指定寬度也要換行，我表示只知道不超多指定寬度的各種文字對(duì)齊方式 ctx.textAlign = 'center' ;

5. canvas在高清屏下模糊的問(wèn)題（超簡(jiǎn)單的不知道度娘怎么會(huì)那么啰嗦）不就是canvas.witdt=innerWidth*devicePixelRatio

HTML結(jié)構(gòu)

<p class="imgBox" v-cloak>
    <img :src='imgSrc' 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主要結(jié)構(gòu)
new Vue({
    el:'imgBox',
    data:{
        urlParam: {},//獲取url中的傳值對(duì)象
        randomNum: 1,//隨機(jī)數(shù)用于確定那個(gè)祈福頁(yè)
        userName: '',//用戶稱呢
        imgSrc: '',//合成最終圖片
        userImg: '',//用戶頭像圖片
        userMessage: '',//用戶留言
    },
    methods: {
        // 分享到盆友圈
        wxShareFriends: function () {},
        // 初始化請(qǐng)求頭
        wxHttp: function () {
            $.ajaxSetup({
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
        },
        // 獲取隨機(jī)數(shù)[1,10]
        randomNumbers() {
            this.randomNum = Math.ceil(Math.random() * 10)
        },
        // 獲取微信用戶頭像和稱呢和用戶輸入祝福語(yǔ)
        getUserInfo() {
            var vm = this;
            $.post('API請(qǐng)求地址', function (data) {
                if (data.code == 1) {
                    vm.userImg = data.data.headimg;
                    vm.userName = data.data.nickname;
                    if (vm.randomNum % 2 == 0) {
                        vm.userMessage= '紅塵相遇，年華已老。歲月花開(kāi)多少不在，古往今來(lái)相遇是一件既微妙。而又神圣的事情，紅塵的情網(wǎng)中'
                    } else {
                        vm.userMessage = '紅塵相遇，年華已老'
                    }
                }
                vm.$nextTick(function () {
                    vm.drawCanvasBgImg();
                })
            })
        },
        // 獲取頁(yè)面dpr和寬度
        getWindowInfo() {
            var windowInfo = {};
            windowInfo.dpr = window.devicePixelRatio;
            if (window.innerWidth) {
                windowInfo.width = window.innerWidth;
            }
            else {
                windowInfo.width = document.body.clientWidth;
            }
            return windowInfo;
        },
        // 畫(huà)活動(dòng)頁(yè)分享背景大圖
        drawCanvasBgImg () {},
        // 在背景圖片的畫(huà)布上截取一個(gè)圓然后填充入用戶頭像
        drawCanvasUserImg(canvas, ctx, dpr) {},
        // 填寫(xiě)用戶稱呢或者用戶留言
        canvasFillText (canvas, ctx, dpr, circleR) {},
        // 合成base64位分享圖
        convertCanvasToImage (canvas) {
            this.imgSrc = canvas.toDataURL("image/jpeg");//png有毒在安卓機(jī)下識(shí)別二維碼無(wú)法跳轉(zhuǎn)
            this.$Spin.hide();
        }
    }
})

畫(huà)圖方法步驟

1. drawCanvasBgImg ()

2. drawCanvasUserImg (canvas, ctx, dpr)

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

4. convertCanvasToImage (canvas)

畫(huà)活動(dòng)頁(yè)分享背景大圖 drawCanvasBgImg ()

//拿到數(shù)據(jù)后開(kāi)始畫(huà)背景大圖 想法很簡(jiǎn)單就是把圖片畫(huà)到canvas中然后在畫(huà)布上再畫(huà)頭像文字讓后轉(zhuǎn)成img
 drawCanvasBgImg () {
    var vm = this;
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    var clientWidth = this.getWindowInfo().width;??//獲取屏幕寬度用于canvas寬度自適應(yīng)移動(dòng)端屏幕
    var dpr = this.getWindowInfo().dpr;
    ctx.globalCompositeOperation = "source-atop";//** 坑鋸齒感覺(jué)沒(méi)什么用不知道是不是用錯(cuò)地方了 **
    canvas.width = dpr * clientWidth;??//由于手機(jī)屏幕時(shí)retina屏，都會(huì)多倍渲染，用dpr來(lái)動(dòng)態(tài)設(shè)置畫(huà)布寬高，避免圖片模糊
    canvas.height = dpr * clientWidth * 609 / 375;//去掉微信頭部的狀態(tài)欄應(yīng)該是603 沒(méi)搞懂603還是不能讓圖片滿屏直接多加到了609
    var img = new Image();
    img.crossOrigin = '';//死坑的圖片跨域 （img.crossOrigin = "Anonymous"這種寫(xiě)法還是不能顯示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)

// 在背景圖片的畫(huà)布上截取一個(gè)圓然后填充入用戶頭像
drawCanvasUserImg: function (canvas, ctx, dpr) {
    var vm = this;
    var circleR = 50 * dpr;//半徑
    var circleX = canvas.width / 2;//圓心X坐標(biāo)
    var circleY = 50 * dpr;//圓心Y坐標(biāo)
    var imgX = circleX - circleR;//圖片X開(kāi)始坐標(biāo)
    var imgY = circleY - circleR;//圖片Y開(kāi)始坐標(biāo)
    var imgWidth = 2 * circleR;//圖片按圓形大小
    var img = new Image();
    img.crossOrigin = '';
    img.src = this.userImg;
    img.onload = function () {
        ctx.save(); // 保存當(dāng)前ctx的狀態(tài)
        ctx.arc(circleX, circleY, circleR, 0, 2 * Math.PI); //畫(huà)出圓
        ctx.clip(); //裁剪上面的圓形
        ctx.drawImage(img, imgX, imgY, imgWidth, imgWidth); // 在剛剛裁剪的園上畫(huà)圖
        ctx.restore(); // 還原狀態(tài)
        vm.canvasFillText(canvas, ctx, dpr, circleR);
    }
},

在canvas中畫(huà)文字

// 填寫(xiě)用戶稱呢或者用戶留言
canvasFillText (canvas, ctx, dpr, circleR) {
    var fontSizeThis = dpr * 20 + 'px' + ' Arial';
    var userNameY = 0;//用戶名Y軸坐標(biāo)
    var userMessageX = dpr * 40;//用戶留言X軸坐標(biāo)
    var userMessageY = 0;//用戶留言Y軸坐標(biāo)
    var lastSubStrIndex = 0;//字符串下標(biāo)
    var lineWidth = 0;//一行寬度
    var allTextWidth = 0;//所有字符寬度
    ctx.font = fontSizeThis;
    // 需要用戶名是寫(xiě)入用戶名
    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;
        }
        // 字符串長(zhǎng)度大于畫(huà)布區(qū)域要換行
        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;//設(shè)置行高
                    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);
},

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“html5中canvas微信海報(bào)的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!