纯正的代码水文--多码警告

写这个文章主要是为了记录开发中用到的相关方法，避免以后再遇到的时候再去一通度娘搜索（虽然以后遇到还是很大概率直接去搜索...），同时也希望能帮助有需要的小伙伴们。

本文主要记录三个内容，一个是前端生成带印章和文字的图片；二是微信和支付宝内h5分享；三是微信和支付宝内点击图片查看大图功能。

一、前端生成带公章的图片

此处需求是：前端生成一个带有文字和公章的图片，并能在微信和支付宝里长按保存，其中各种文字和公章内容都是动态的。

先上代码，看下整体的结构，此处数据均为实例数据，真实需求中均为接口获取。

<!-- 转化为图片内容 -->
<div class="zy_my_certificate_end_box">
    // 最终生成的图片
    <img :src="dataObj.imgSrc" />
</div>
<!-- 实体html内容 -->
<div class="zy_my_certificate_box" id="ImgRef">
    <img :src="getAssets('gongyi/certificate.png')" />
    <p class="certificate_number">证书编号：123456789</p>
    <div class="certificate_content">
        <p>亲爱的张三同学</p>
        <p>恭喜你获得全班第一名的好成绩，仅此奖状，以资鼓励</p>
    </div>
    <div class="certificate_bottom">
        // 此处为公章位置
        <div class="certificate_icon">
          <canvas id="certificate_icon_id" width="80" height="80"></canvas>
        </div>
        <p>东南西北第一实验小学</p>
        <p>2023年5月9日</p>
    </div>
</div>

针对这个结构，就只说一点，实体的html内容，也就是用来生成图片的内容，不能设置任何opacity:0, visibility: hidden之类的属性，那样生成的图片都是大白纸一张，此处只能把它fixed、absolute到屏幕之外的地方。

接下来看关于公章的生成，主要涉及环形文字的生成和五角星的绘制，相关说明在代码注释里有写明。

// 绘制印章
const createSeal = () => {
  return new Promise((resolve)=>{
    var canvas = document.getElementById('certificate_icon_id');
    var context = canvas.getContext('2d');
    // 绘制印章边框   
    var width = canvas.width / 2;
    var height = canvas.height / 2;
    context.lineWidth = 2;    // 边框宽度
    context.strokeStyle = "#f00";    // 边框颜色
    context.beginPath();
    context.arc(width, height, 38, 0, Math.PI * 2);    // 绘制个圆圈，不理解的可以查下api
    context.stroke();

    //画五角星，此处的第四个参数，根据自己需要的大小进行修改
    create5star(context, width, height, 10, "#f00", 0);

    // 绘制印章名称，就是公章星星下边那一排小字   
    context.font = '7px SimSun';
    context.textBaseline = 'middle';  //设置文本的垂直对齐方式
    context.textAlign = 'center';   //设置文本的水平对对齐方式
    context.lineWidth = 1;
    context.fillStyle = '#f00';
    let name = "学校专用章"
    context.fillText(name, width, height   24);   // 此处最后一个参数表示距离底部位置，可以根据情况自行设定

    // 绘制印章单位   
    context.translate(width, height);  // 平移到此位置,
    context.font = '8px SimSun'
    let count = dataObj.certificateData!.merName.length;  // 字数   
    let angle = 4 * Math.PI / (3 * (count - 1));  // 字间角度   
    let chars = dataObj.certificateData!.merName.split("");
    let c;
    for (let i = 0; i < count; i  ) {
      c = chars[i];  // 需要绘制的字符   
      if (i == 0){
        context.rotate(5 * Math.PI / 6);
      } else {
        context.rotate(angle);
      }
      
      context.save();
      context.translate(31, 0);  // 平移到此位置,此时字和x轴垂直，关于这个位置，个人也是多次尝试确定好的，考虑可能和绘制半径有一定的关系。这里一定要根据自己图章大小修改，否则可能看不到任何文字！   
      context.rotate(Math.PI / 2);  // 旋转90度,让字平行于x轴   
      context.fillText(c, 0, 0);  // 此点为字的中心点   
      context.restore();
    }
    resolve(true)

    //绘制五角星，这部分不用修改，可以拿来直接用  
    /** 
     * 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上 
     * rotate:绕对称轴旋转rotate弧度 
    */
    function create5star(context, sx, sy, radius, color, rotato) {
      context.save();
      context.fillStyle = color;
      context.translate(sx, sy);  //移动坐标原点  
      context.rotate(Math.PI   rotato);  //旋转  
      context.beginPath();   //创建路径  
      var x = Math.sin(0);
      var y = Math.cos(0);
      var dig = Math.PI / 5 * 4;
      for (var i = 0; i < 5; i  ) {//画五角星的五条边  
        var x = Math.sin(i * dig);
        var y = Math.cos(i * dig);
        context.lineTo(x * radius, y * radius);
      }
      context.closePath();
      context.stroke();
      context.fill();
      context.restore();
    }
  })
}

此处使用了promise，因为后需要将文字和图章一起转化为图片，需要确保图章已经生成完成才去转换。

后边的内容就比较简单了，直接用html2canvas转换就可以了，当然此处没有做缩放的处理，因为下载出来的图片效果还是可以的，如果图片模糊，可能需要先放大再缩小的操作。

// 将html转化成图片
const htmlToImg = ()=>{
  let imgid = document.getElementById('ImgRef')!;
  html2canvas(imgid, {
    allowTaint: true,
    useCORS: true,
    logging: true,
  }).then((canvas) => {
    //  转成图片，生成图片地址
    let imgUrl = canvas.toDataURL('image/jpeg')
    dataObj.imgSrc = imgUrl
  })
}

// 调用绘制公章和转换图片
createSeal().then(()=>{
    htmlToImg()
})

最后来看下生成的图片最终效果，数据和上边的数据不一样哦，只是看下整体效果~

这篇好文章是转载于：学新通技术网