html5中canvas微信海報(bào)分享的示例分析-創(chuàng)新互聯(lián)

小編給大家分享一下html5中canvas微信海報(bào)分享的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

我們提供的服務(wù)有：網(wǎng)站制作、成都網(wǎng)站制作、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、七臺(tái)河ssl等。為數(shù)千家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的七臺(tái)河網(wǎng)站制作公司

隨機(jī)產(chǎn)生一張圖片
拿到微信用戶的頭像和稱呢（自己調(diào)后端的接口獲取）
把用戶頭像和稱呢和隨機(jī)產(chǎn)生一張圖片合成一張海報(bào)
可能上一頁(yè)用戶還有填入的心愿文本也要填入圖片中

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

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

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

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

canvas在微信瀏覽器中長(zhǎng)按無(wú)效不能像img一樣長(zhǎng)按分享（那我就轉(zhuǎn)成img唄）
轉(zhuǎn)成img后在微信開(kāi)發(fā)者工具中能顯示，真機(jī)無(wú)效（欲哭無(wú)淚），度娘說(shuō)可能是圖片跨域^-^
用戶頭像合成還要圓角，我表示不會(huì)啊，直接看canvas api文檔了對(duì)度娘無(wú)愛(ài)了
canvas填入文字超過(guò)指定寬度也要換行，我表示只知道不超多指定寬度的各種文字對(duì)齊方式 ctx.textAlign = 'center' ;
canvas在高清屏下模糊的問(wèn)題（超簡(jiǎn)單的不知道度娘怎么會(huì)那么啰嗦）不就是canvas.witdt=innerWidth*devicePixelRatio

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

<div class="imgBox" v-cloak>
    <img :src='imgSrc' v-if="imgSrc" />
</div>

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à)圖方法步驟

drawCanvasBgImg ()
drawCanvasUserImg (canvas, ctx, dpr)
canvasFillText (canvas, ctx, dpr, circleR)
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;&emsp;&emsp;//獲取屏幕寬度用于canvas寬度自適應(yīng)移動(dòng)端屏幕
    var dpr = this.getWindowInfo().dpr;
    ctx.globalCompositeOperation = "source-atop";//** 坑鋸齒感覺(jué)沒(méi)什么用不知道是不是用錯(cuò)地方了 **
    canvas.width = dpr * clientWidth;&emsp;&emsp;//由于手機(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);
},

以上是“html5中canvas微信海報(bào)分享的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章標(biāo)題：html5中canvas微信海報(bào)分享的示例分析-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)于：http://jinyejixie.com/article18/diecgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷(xiāo)推廣、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站收錄、標(biāo)簽優(yōu)化、微信公眾號(hào)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

html5中canvas微信海報(bào)分享的示例分析-創(chuàng)新互聯(lián)