首頁 > web前端 > H5教程 > 主體

html5 canvas 微信海報分享

小云云
發布: 2018-01-15 09:51:20
原創
4015 人瀏覽過

本文主要介紹了詳解html5 canvas 微信海報分享(個人爬坑)的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧,希望能幫助大家。

  1. 隨機產生一張圖片

  2. 拿到微信用戶的頭像和稱呢(自己調後端的介面取得)

  3. 把使用者頭像和稱呢和隨機產生一張圖片合成一張海報

  4. #可能上一頁使用者還有填入的心願文字也要填入圖片中

實作效果圖

記錄下實作功能過程中遇到的問題

  1. canvas在微信瀏覽器中長按無效不能像img一樣長按分享(那我就轉成img唄)

  2. 轉成img後在微信開發者工具中能顯示,真機無效(欲哭無淚),度娘說可能是圖片跨域^-^

  3. 使用者頭像合成還要圓角,我表示不會啊,直接看canvas api文檔了對度娘無愛了

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

  5. canvas在高清螢幕下模糊的問題(超簡單的不知道度娘怎麼會那麼囉嗦)不就是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:&#39;imgBox&#39;,
    data:{
        urlParam: {},//获取url中的传值对象
        randomNum: 1,//随机数用于确定那个祈福页
        userName: &#39;&#39;,//用户称呢
        imgSrc: &#39;&#39;,//合成最终图片
        userImg: &#39;&#39;,//用户头像图片
        userMessage: &#39;&#39;,//用户留言
    },
    methods: {
        // 分享到盆友圈
        wxShareFriends: function () {},
        // 初始化请求头
        wxHttp: function () {
            $.ajaxSetup({
                headers: {
                &#39;X-CSRF-TOKEN&#39;: $(&#39;meta[name="csrf-token"]&#39;).attr(&#39;content&#39;)
                }
            });
        },
        // 获取随机数[1,10]
        randomNumbers() {
            this.randomNum = Math.ceil(Math.random() * 10)
        },
        // 获取微信用户头像和称呢和用户输入祝福语
        getUserInfo() {
            var vm = this;
            $.post(&#39;API请求地址&#39;, function (data) {
                if (data.code == 1) {
                    vm.userImg = data.data.headimg;
                    vm.userName = data.data.nickname;
                    if (vm.randomNum % 2 == 0) {
                        vm.userMessage= &#39;红尘相遇,年华已老。岁月花开多少不在,古往今来相遇是一件既微妙。而又神圣的事情,红尘的情网中&#39;
                    } else {
                        vm.userMessage = &#39;红尘相遇,年华已老&#39;
                    }
                }
                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)

#畫活動頁分享背景大圖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 = &#39;&#39;;//死坑的图片跨域 (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 = &#39;&#39;;
    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);
    }
},
登入後複製

在canvas中畫文字


// 填写用户称呢或者用户留言
canvasFillText (canvas, ctx, dpr, circleR) {
    var fontSizeThis = dpr * 20 + &#39;px&#39; + &#39; Arial&#39;;
    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 = &#39;center&#39;;
        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);
},
登入後複製

相關推薦:

jQuery和CSS3實作APPLE TV海報視差效果實例分享

分享一個用canvas合成海報圖片的行動裝置項目

使用php傳送自訂背景、頭像、文字的二維碼海報並含有提示的微信訊息

#

以上是html5 canvas 微信海報分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板