1、JS特效实例：微信头像拼文字特效

展会、会议现场经常会用到参与者手机微信扫码，参会者微信头像拼成文字、图案或logo大屏同步显示这样的功能需求，例如下图效果

大屏效果：

PhotoShop制作位图素材

准备像素文字素材用来作为标记位置的导入资源文件

例如字母P，这里以9个像素作为一个点单位，字母纵向高度由5个点组成，整个字母由12个点组成，这里之所以用9个像素作为一个点，因为比如字母R、Y、N有倾斜的笔画，这样方便你标记倾斜的点，参照下图会直观

在绘制字母时，选择铅笔工具，像素设置为3，硬度100%

【首选项】 -> 【参考线、网格和切片】如下设置

绘制完成后导出背景透明的png图片

将素材导入，生成位置标记

源码中我们制作了一个工具页面用来导入标记好的png文件，自动生成位置标记json参数，大概原理是

1. 将png图片加载到canvas内
2. 依靠canvas的api来遍历位图中的像素点，当透明度大于参数中的阈值则视为该位置应该被头像图片替代，添加到标记位置数组，我们在PS制作图片时约定了9个像素为一个点，这里参数设置为3，即一个点横向、纵向都是由3个像素组成，在扫描时会从左向右，自上而下，邻近9像素只会标记左上角点位。
3. 返回位置结果集及imgWidth、imgHeight数据

// 获取canvas元素
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
// 定义一个图片对象
var image = new Image();
// 点击按钮信息后，加载图片
$("#btnLoad").click(function() {
  image.src = "template.png?" + new Date().getTime()
})

// 图片加载完成后，绘制到canvas画板上
image.onload=function(){
  ctx.drawImage(image, 0, 0);
  imgWidth = image.width
  imgHeight = image.height
  alert("加载完成")
};

$("#btnCreate").click(function() {
  const imageData = ctx.getImageData(0, 0, imgWidth, imgHeight).data;
  console.log('像素：', imageData);
  ...
}

我们将文件部署到nginx、apache、tomcat或者随便一个应用服务器下，浏览器中打开textpic_tool.html按步骤操作，

注意：不要在磁盘下直接打开html文件，要部署到应用服务器下，否则会触发浏览器的安全策略，canvas加载图片会失败，浏览器会提示加载的图片不是同域下资源，后续的api也就不能顺利执行。

参数修改及运行

参照源码目录中pc.html内容

引入js文件

<script src="js/pic2text.js"></script>

拷贝Json以及imgWidth、imgHeight到程序示例对应位置进行初始化，浏览器访问查看效果

var cells = [{"x":0,"y":0,"a":255},......];
var imgWidth = 170;
var imgHeight = 15;
var viewTop = 200
var data = [{
  headUrl: 'https://thirdwx.qlogo.cn/mmopen/vi_32/h28BE1KXKicpCtMzibI0zlnic9VcLI3Y1KweoXKME8L32Thss0VU3qDiahpZK19vnSOicwnJUtIlbiaONocPpgOrxmAQ/132'
}]

初始化

$(document).ready(function(){
    let pic2Text = new Pic2Text({
      top: viewTop,
      width: 0.8,//80%
      imgWidth: imgWidth,
      imgHeight: imgHeight,
      pixelUnit: 3,
      cells: cells,
      finish: function() {
        $('.texttitle').css('top', viewTop + pic2Text.getHeight() + 50)
        $('.texttitle').animate(
          { opacity: 1 },
          3000,
          'swing',
          function() {}
        );
      }
    })
    
    //一次性显示，头像数据集数量不足的补充虚拟头像
    pic2Text.setPicData(data)
    pic2Text.showAll()
    
    /*
    //模拟网络实时请求获取增量头像数据
    setInterval(function(){
      //data：本次新增的头像数据集
      //追加3个虚拟头像数据集，当扫码人数较少时，大屏追加虚拟头像来优化显示效果
      pic2Text.appendPicData(data, 0)
    }, 500)*/
    
    $('.texttitle').css('width', $(window).width()*0.8)
    $('.texttitle').css('left', $(window).width()*0.1)
});

源码下载