js 通过canvas生成带二维码的海报图_前端如何设计动态二维码宣传图

前言

h5移动端生成海报图，可长按图片保存或发送给朋友，或长按识别二维码。两种场景：第一种是生成项目分享海报图，通过背景图和地址生成的二维码合成一张海报图；第二种是通过页面生成商品海报图，页面有产品介绍信息，商户名称logo和商品详情页生成的二维码，把含有二维码的页面生成海报图。

一、背景图片和二维码合成一张图

示例：这里使用jquey实现的。

1.引入库

在script中引入jquery、qrcode.js生成二维码的插件。

2.使用步骤

准备一张海报背景图，html代码

<div class="dialog-wrapper-post">
        <p class="dialog-tips">长按海报转发，邀请好友助力点亮</p>
        <div class="share-post">
            <div id="qrcode"></div>
            <div id="h">
                <canvas id="myCanvas"></canvas>
            </div>
            <!-- 关闭弹窗 -->
            <img src="./img/close.png" alt="" class="img-close" id="closePoster">
        </div>
        
    </div>
1
2
3
4
5
6
7
8
9
10
11
12

#myCanvas {
    width: 300px;
    height: 532px;
}
1
2
3
4

生成海报图js

// 根据海报背景图和地址合成一张海报图
function createPoster(){
    // 二维码访问的地址拼接
    let  thref = location.protocol + "//"+location.hostname+"/flowerLantern/help.html?id="+voteId+"&orgId="+orgId+"&itemId="+itemIds;
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d"); 
    var devicePixelRatio = window.devicePixelRatio || 1,   
        backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1, 
        ratio = devicePixelRatio / backingStoreRatio;
    var qrcode = new QRCode("qrcode",{
        render: "canvas", //渲染方式指定canvas方式
        width: 72*ratio, //宽度 
        height: 72*ratio, //高度 
        typeNumber: -1, //计算模式
        text: thref, //任意内容 
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
    });
    var mycanvas1=document.getElementsByTagName('canvas')[0]; //获取网页中的canvas对象，这里是通过qrcode生成的二维码的canvas
    //将转换后的二维码img标签插入到html中
    var imgewm=convertCanvasToImage(mycanvas1); // 将二维码canvas生成图片
    $('#qrcode').html("");//移除已生成的避免重复生成
    $('#qrcode img').hide();
    var width = document.getElementById("myCanvas").clientWidth; //宽度 
    var height = document.getElementById("myCanvas").clientHeight; // 高度
    canvas.width = width*ratio;
    canvas.height = height*ratio;
    //首先画上背景图
    var img = new Image();
    img.src = './img/post.jpg'; // 背景图路径
    img.width = width;
    img.height = height;
    img.crossOrigin="*";
    img.onload = function() { //必须等待图片加载完成
        ctx.scale(ratio, ratio);
        ctx.drawImage(img, 0, 0, width, height); //绘制背景图像进行拉伸
        console.log("
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/229281