详解html5 canvas 手机微信海报共享(本人爬坑)

日期:2021-01-19 类型:科技新闻 

关键词:抠图软件电脑版,在线图片加水印,在线 抠图,在线画图网站,淘宝做图片用什么软件好

本文详细介绍了canvas 手机微信海报共享,共享给大伙儿,实际以下:

  1. 任意造成1张照片
  2. 拿到手机微信客户的头像和称呢(自身调后端开发的插口获得)
  3. 把客户头像和称呢和任意造成1张照片生成1张海报
  4. 将会上1页客户也有填入的愿望文字也要填入照片中

完成实际效果图

纪录下在完成作用全过程中遇到的难题

  1. canvas在手机微信访问器中长按失效不可以像img1样长按共享(那我就转成img呗)
  2. 转成img后在手机微信开发设计者专用工具中能显示信息,真机失效(欲哭无泪),度娘说将会是照片跨域^-^
  3. 客户头像生成还要圆角,我表明不容易啊,立即看canvas api文本文档了对度娘无爱了
  4. canvas填入文本超出特定宽度也要换行,我表明只了解不超多特定宽度的各种各样文本对齐方法 ctx.textAlign = 'center' ;
  5. canvas在高清屏下模糊不清的难题(超简易的不知道道度娘如何会那末唠叨)不便是canvas.witdt=innerWidth*devicePixelRatio

HTML构造

<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关键构造
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= '红尘相遇,年华已老。时光花盛开是多少不在,自古以来相遇是1件既彼此之间。而又神圣的事儿,红尘的情网中'
                    } 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 () {},
        // 在情况照片的画布上截取1个圆随后填充入客户头像
        drawCanvasUserImg(canvas, ctx, dpr) {},
        // 填写客户称呢或客户留言
        canvasFillText (canvas, ctx, dpr, circleR) {},
        // 生成base64位共享图
        convertCanvasToImage (canvas) {
            this.imgSrc = canvas.toDataURL("image/jpeg");//png有毒在安卓系统机下鉴别2维码没法自动跳转
            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屏,都会多倍3D渲染,用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)

// 在情况照片的画布上截取1个圆随后填充入客户头像
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);
    }
},

在canvas中画文本

// 填写客户称呢或客户留言
canvasFillText (canvas, ctx, dpr, circleR) {
    var fontSizeThis = dpr * 20 + 'px' + ' Arial';
    var userNameY = 0;//客户名Y轴座标
    var userMessageX = dpr * 40;//客户留言X轴座标
    var userMessageY = 0;//客户留言Y轴座标
    var lastSubStrIndex = 0;//标识符串下标
    var lineWidth = 0;//1行宽度
    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;
        }
        // 标识符串长度超过画布地区要换行
        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;//设定行高
                    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);
},

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。