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

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

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),洮北企業(yè)網(wǎng)站建設(shè),洮北品牌網(wǎng)站建設(shè),網(wǎng)站定制,洮北網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,洮北網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

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

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

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

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

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

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

canvas在微信瀏覽器中長按無效不能像img一樣長按分享（那我就轉(zhuǎn)成img唄）
轉(zhuǎn)成img后在微信開發(fā)者工具中能顯示，真機(jī)無效（欲哭無淚），度娘說可能是圖片跨域^-^
用戶頭像合成還要圓角，我表示不會(huì)啊，直接看canvas api文檔了對(duì)度娘無愛了
canvas填入文字超過指定寬度也要換行，我表示只知道不超多指定寬度的各種文字對(duì)齊方式 ctx.textAlign = 'center' ;
canvas在高清屏下模糊的問題（超簡單的不知道度娘怎么會(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è)祈福頁
        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)
        },
        // 獲取微信用戶頭像和稱呢和用戶輸入祝福語
        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= '紅塵相遇，年華已老。歲月花開多少不在，古往今來相遇是一件既微妙。而又神圣的事情，紅塵的情網(wǎng)中'
                    } 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;
        },
        // 畫活動(dòng)頁分享背景大圖
        drawCanvasBgImg () {},
        // 在背景圖片的畫布上截取一個(gè)圓然后填充入用戶頭像
        drawCanvasUserImg(canvas, ctx, dpr) {},
        // 填寫用戶稱呢或者用戶留言
        canvasFillText (canvas, ctx, dpr, circleR) {},
        // 合成base64位分享圖
        convertCanvasToImage (canvas) {
            this.imgSrc = canvas.toDataURL("image/jpeg");//png有毒在安卓機(jī)下識(shí)別二維碼無法跳轉(zhuǎn)
            this.$Spin.hide();
        }
    }
})

畫圖方法步驟

drawCanvasBgImg ()
drawCanvasUserImg (canvas, ctx, dpr)
canvasFillText (canvas, ctx, dpr, circleR)
convertCanvasToImage (canvas)

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

//拿到數(shù)據(jù)后開始畫背景大圖 想法很簡單就是把圖片畫到canvas中然后在畫布上再畫頭像文字讓后轉(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";//** 坑鋸齒感覺沒什么用不知道是不是用錯(cuò)地方了 **
    canvas.width = dpr * clientWidth;??//由于手機(jī)屏幕時(shí)retina屏，都會(huì)多倍渲染，用dpr來動(dòng)態(tài)設(shè)置畫布寬高，避免圖片模糊
    canvas.height = dpr * clientWidth * 609 / 375;//去掉微信頭部的狀態(tài)欄應(yīng)該是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)

// 在背景圖片的畫布上截取一個(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開始坐標(biāo)
    var imgY = circleY - circleR;//圖片Y開始坐標(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); //畫出圓
        ctx.clip(); //裁剪上面的圓形
        ctx.drawImage(img, imgX, imgY, imgWidth, imgWidth); // 在剛剛裁剪的園上畫圖
        ctx.restore(); // 還原狀態(tài)
        vm.canvasFillText(canvas, ctx, dpr, circleR);
    }
},

在canvas中畫文字

// 填寫用戶稱呢或者用戶留言
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;
    // 需要用戶名是寫入用戶名
    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;
        }
        // 字符串長度大于畫布區(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í)也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

標(biāo)題名稱：html5中canvas微信海報(bào)的示例分析-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://chinadenli.net/article40/cepcho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計(jì)、營銷型網(wǎng)站建設(shè)、網(wǎng)站策劃、網(wǎng)站內(nèi)鏈

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

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

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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