前端H5生成海报

最近项目需要涉及到前端海报合成分享功能，前端靠不上只能自己上... 现学现卖 相关链接

• https://blog.csdn.net/allway2/article/details/120650927
• https://jskoa.com/?p=8102
• https://blog.csdn.net/cuk0051/article/details/108340016
• https://blog.csdn.net/weixin_41192489/article/details/109351747
• https://www.zhangxinxu.com/wordpress/2018/02/canvas-text-break-line-letter-spacing-vertical/

CSS代码如下

 * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
}

HTML代码如下

<button id="btn" style="height:50px;width:100%;margin:0 auto">点我生成海报</button>
<!--合成后的海报图-->
<img id="out" src="" style="width:100%;border:1px solid black;margin-top:20px;display: none;">

JS代码如下

 CanvasRenderingContext2D.prototype.wrapText = function (text, x, y, maxWidth, lineHeight) {
        if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {
            return;
        }
        var context = this;
        var canvas = context.canvas;
        if (typeof maxWidth == 'undefined') {
            maxWidth = (canvas && canvas.width) || 300;
        }
        if (typeof lineHeight == 'undefined') {
            lineHeight = (canvas && parseInt(window.getComputedStyle(canvas).lineHeight)) || parseInt(window.getComputedStyle(document.body).lineHeight);
        }
        // 字符分隔为数组
        var arrText = text.split('');
        var line = '';
        for (var n = 0; n < arrText.length; n++) {
            var testLine = line + arrText[n];
            var metrics = context.measureText(testLine);
            var testWidth = metrics.width;
            if (testWidth > maxWidth && n > 0) {
                context.fillText(line, x, y);
                line = arrText[n];
                y += lineHeight;
            } else {
                line = testLine;
            }
        }
        context.fillText(line, x, y);
    };


    function nickname(x, y) {
        context.fillStyle = 'grey';
        context.font = '32px  SC';
        context.wrapText("iuu 邀请你一起学习", x, y, 700, 60)
    }

    // 课程标题
    function goodsTitle(x, y) {
        context.fillStyle = 'black';
        context.font = '40px  bold';
        context.wrapText("第131讲：如何提升社会科学类核心期刊投稿的命中率", x, y, 700, 60)
    }

    // 描述
    function shopMsg(x, y) {
        context.fillStyle = 'grey';
        context.font = '25px  bold';
        context.wrapText("— 科研写作研究所", x, y, 700, 60)
    }

    // 图片描述
    function imgMsg(x, y) {
        context.fillStyle = 'grey';
        context.font = '24px  SC';
        context.fillText("长按保存图片", 310, 1250)
    }


    // 背景
    function bgImgScaleToFill(img) {
        var scale = Math.max(canvas.width / img.width, canvas.height / img.height);
        var x = (canvas.width / 2) - (img.width / 2) * scale;
        var y = (canvas.height / 2) - (img.height / 2) * scale;
        context.drawImage(img, x, y, img.width * scale, img.height * scale);
    }

    // 商品图
    function goodsImgScaleToFit(img, x, y) {
        var scale = Math.min(canvas.width / img.width, canvas.height / img.height);
        context.drawImage(img, x, y, img.width * scale, img.height * scale);
    }

    // 二维码
    function qrImgScaleToFill(img, x, y) {
        context.drawImage(img, x, y, img.width, img.height);
    }

    // 头像
    function avatarImgScaleToFill(img, x, y, w, h) {
        context.drawImage(img, x, y, w, h);
    }


    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    window.onload = function () {
        var btn = document.getElementById("btn");

        var QrImgUrl = "http://fenxiao-guogao.wukongkeyan.com/tm_ca6379f807f89f5e96ebbce4c81203f7_20220719155912.png"
        var AvatarImgUrl = "http://wechatavator-1252524126.file.myqcloud.com/appzissbssa6278/image/compress/u_api_61edfdfd1c284_PWGOuVUIpM.png"
        var GoodsImgUrl = "http://wechatapppro-1252524126.file.myqcloud.com/appzissbssa6278/image/b_u_6170d73860ce7_73CZtcAY/l4z0x8yo02hu.jpg"

        btn.onclick = function () {
            var all = {avatarImg: null, goodsImg: null, qrImg: null}

            var QrImg = new Promise(function (resolve, reject) {
                var qrImg = new Image();
                qrImg.crossOrigin = 'anonymous';
                qrImg.src = QrImgUrl
                qrImg.onload = function () {
                    resolve(qrImg);
                }
            })

            var AvatarImgCircle = new Promise(function (resolve, reject) {
                var cs = document.createElement('canvas');
                var ctx = cs.getContext('2d');
                var avatar = new Image();
                avatar.crossOrigin = 'anonymous';
                avatar.src = AvatarImgUrl
                avatar.onload = function () {
                    cs.width = avatar.width;
                    cs.height = avatar.height;
                    var width = avatar.width;
                    var height = avatar.height;
                    var circle = {x: width / 2, y: height / 2, r: width / 2}
                    ctx.clearRect(0, 0, width, height);
                    ctx.save();
                    ctx.beginPath();
                    ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, false);
                    ctx.clip();
                    ctx.drawImage(avatar, 0, 0);
                    ctx.restore();
                    // var base64 =
                    var avatarImg = new Image()
                    avatarImg.src = cs.toDataURL("image/png");
                    resolve(avatarImg);
                }
            })
            var GoodsImg = new Promise(function (resolve, reject) {
                var goodsImg = new Image();
                goodsImg.crossOrigin = 'anonymous';
                goodsImg.src = GoodsImgUrl
                goodsImg.onload = function () {
                    resolve(goodsImg);
                }
            })
            Promise.all([QrImg, GoodsImg, AvatarImgCircle]).then(res => {
                all.avatarImg = res[2]
                all.goodsImg = res[1]
                all.qrImg = res[0]
                var bgImg = new Image();
                bgImg.crossOrigin = 'anonymous';
                bgImg.src = 'http://commonresource-1252524126.cdn.xiaoeknow.com/image/l5c2twsm0lm1.png';
                bgImg.onload = function () {
                    canvas.width = 750;
                    canvas.height = 1334;
                    bgImgScaleToFill(bgImg)
                    goodsImgScaleToFit(all.goodsImg, 0, 0)
                    qrImgScaleToFill(all.qrImg, 300, 1060)
                    avatarImgScaleToFill(all.avatarImg, 25, 680, 80, 80)
                    nickname(145, 740)
                    goodsTitle(40, 900)
                    shopMsg(40, 1020)
                    imgMsg(310, 1250)
                    var base64 = canvas.toDataURL();
                    document.getElementById('out').src = base64;
                    document.getElementById('out').style.display = "block";
                }
            })
        }
    }

这个代码主要是进行海报合成，其中注意点事 所有得图片都必须加载完成之后进行合成操作 所以用到了Promise来进行处理