使用 JavaScript 根据用户照片和姓名生成海报

摘要：前言最近在为公司的一个比赛制作专题页，碰到一个使用参赛者上传的照片生成专属海报的需求，实现过程中用到了一些以前没用过的，也踩了一些坑，于是将其记录下来。

最近在为公司的一个比赛制作专题页，碰到一个使用参赛者上传的照片生成专属海报的需求，实现过程中用到了一些以前没用过的 api，也踩了一些坑，于是将其记录下来。

用户点击按钮进行照片上传

照片上传完成后，将照片进行裁剪，并和海报背景、姓名等组合得到海报

将生成的海报上传

效果大概如下：

海报背景：

成品：

canvas#poster-canvas(width="960" height="1280")

function initCanvas() {
  canvasCtx = document.getElementById("poster-canvas").getContext("2d");
}

海报背景为预先提供的一张照片，将其设置到一个隐藏的 img 标签里面，并且预留一个 canvas 元素用于绘制海报：

img.poster-background(src="/assets/xxx/poster-background.jpeg")

页面加载完成后，将海报背景绘制到 canvas 内：

$("img.poster-background").on("load", function () {
  var backgroundImg = $("img.poster-background")[0];
  canvasCtx.drawImage(backgroundImg, 0, 0, 960, 1280);
  renderName();
});

海报背景绘制完成之后，需要将用户姓名绘制到特定位置。由于用户姓名长度不一，因此需要进行计算确定字体大小：

function renderName() {
  var name = $("input[name="chName"]").val();
  var fontSize;
  if (name.length < 3) {
    fontSize = 100;
  } else {
    fontSize = parseInt(320 / name.length);
  }
  canvasCtx.font = "bold " + fontSize + "px Courier New";
  canvasCtx.fillStyle = "#de071b";
  canvasCtx.fillText(name, 20, 1066);
}

使用 file 类型的 input 元素，因为页面上表现为点击按钮，因此使用经典的将 input 元素透明化并覆盖按钮的方法：

a.upload-btn 
  input#photo(type="file" name="photo" accept="image/jpeg, image/png")
  | 上传自己的照片生成专属海报

.upload-btn input {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 100%;
  height: 68px;
  cursor: pointer;
}

然后监听 input 元素的 change 事件，然后使用 FormData API 构造表单数据，使用 ajax 进行异步上传，照片上传完成之后。得到一个地址，将这个地址设置到页面上预留的一个 img 标签里面：

$("#photo").on("change", function (e) {
  var file = e.target.files[0];
  var type = file.type;
  if (type !== "image/jpeg" && type !== "image/png") {
    window.toastr.error("请上传 jpg 或 png 格式的图片");
  } else {
    var formData = new FormData();
    formData.append("avatar", file);
    $.ajax({
      type: "POST",
      url: "/upload_url",
      data: formData,
      contentType: false,
      processData: false,
      success: function(result) {
        var avatarUrl = result.data.url;
        $("img.avatar").attr("src", avatarUrl);
      },
      error: function(err) {
        
      }
    });
  }
});

海报中放置照片的区域为正方形，但是用户上传的照片却不一定，因此需要对照片进行裁剪，裁剪的原则为取照片中间部分。然后将裁剪参数传进 canvas 的 drawImage 方法，进行绘制：

$("img.avatar").on("load", function () {
  var avatarImg = $("img.avatar")[0];
  var originWidth = avatarImg.width;
  var originHeight = avatarImg.height;
  var newWidth, cutStartX, cutStartY;

  if (originWidth < originHeight) {
    newWidth = originWidth;
    cutStartX = 0;
    cutStartY = (originHeight - originWidth) / 2;
  } else if (originWidth > originHeight) {
    newWidth = originHeight;
    cutStartX = (originWidth - originHeight) / 2;
    cutStartY = 0;
  } else {
    newWidth = originWidth;
    cutStartX = 0;
    cutStartY = 0;
  }
  
  canvasCtx.drawImage(avatarImg, cutStartX, cutStartY, newWidth, newWidth, 0, 0, 960, 960);

  uploadPoster();
      
});  

前面绘制海报背景和这里绘制照片，调用的是同一个方法，只不过后者多传进去了裁剪参数。但是需要注意的是，裁剪参数是在绘制位置之前传进去的，而不是简单的补在后面：

canvasCtx.drawImage(backgroundImg, 0, 0, 960, 1280);

canvasCtx.drawImage(avatarImg, cutStartX, cutStartY, newWidth, newWidth, 0, 0, 960, 960);

依然使用 FormData API，因此需要先用 canvas 构造一个 Blob 对象。新版本的 Chrome 和 Firefox 支持 canvas 的 toBlob 方法，可以直接使用：

document.getElementById("poster-canvas").toBlob(function (blob) {});

其它浏览器里，可以先用 toDataURL方法得到 base64 格式的图片数据，再转为 Blob：

var blob = dataURLtoBlob(document.getElementById("poster-canvas").toDataURL());

function dataURLtoBlob(dataurl) {
  if (dataurl.indexOf("base64") < 0) {
    dataurl = "data:image/jpeg;base64," + dataurl;
  }
  var arr = dataurl.split(",");
  var mime = arr[0].match(/:(.*?);/)[1];
  var bstr = atob(arr[1]);
  var n = bstr.length;
  var u8arr = new Uint8Array(n);
  while (n --) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {type: mime});
}

然后进行上传，步骤和前面上传照片一致：

var formData = new FormData();
formData.append("poster", blob);
$.ajax({
  type: "POST",
  url: "/upload_poster_url",
  data: formdata,
  contentType: false,
  processData: false,
  success: function(result) {
    
  },
  error: function(err) {
    
  }
});

至此，整个流程完结。