照片轉Pixel Art動畫影片 PixAnim

 

[試試]

某天突然想到，我也可以利用之前作過的繪文字填圖EmojiPaint的演算法，作一個簡單的像素風動畫，然後可以存成GIF或者影片方便分享。

EmojiPaint裡面己經有一個叫作pixelart的函式，可以把一個己經畫好圖的canvas的內容，轉成像素風格。每一個像素根據指定tile大小(cw*ch)，它的顏色就是這塊tile裡所有pixel的顏色平均值。這就是pixelart的原理，最簡單的作法。

現在，要作成動畫，只要從最大的tile開始，也就是整張圖的大小(縮放調整至400*400)，不斷的呼叫pixelart。作完後再把tile縮小一半，也就是200*200，再作一次pixelart。一直持續這個過程，直到tile為1*1之前停止，因為1*1太多點要畫了。

經過修改的pixelart，會先把此次所有tile都計算好顏色和位置，儲存在一個陣列。接著才是畫圖階段，一個一個把tile畫出來。但是tile愈小的時候，數量就愈多，畫一個tile的時間也要跟著縮短，才不會讓人覺得過程太過冗長。其實，除了隨著tile縮小，畫tile的時間跟著縮短之外。每一個draw處理中畫的tile數量也會跟著增加，這都是為了減少動畫過程太冗長，提高觀看的人的體驗。

底下是關鍵的pixelart和drawblock函式。

function pixelart(id, cw, ch) {
  var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  var col = Math.floor(canvas.width / cw);
  var row = Math.floor(canvas.height / ch);
  var blocks = [];
  for (var i = 0; i < col; i++) {
    for (var j = 0; j < row; j++) {
      var x = cw * i;
      var y = ch * j;
      var rgb = calcRgbSum(imgData.data, x, y, cw, ch);
      blocks.push([x, y, rgb]);
    }
  }
  var canvas2 = document.getElementById(id);
  var ctx2 = canvas2.getContext('2d');
  displayBlocks(ctx2, blocks, cw, ch);
}

function displayBlock(ctx, blocks, index, cw, ch) {
  if (blocks.length <= index) {
    return;
  }
  const b = blocks[index];
  ctx.fillStyle = 'rgb(' + b[2][0] + ',' + b[2][1] + ',' + b[2][2] + ')';
  ctx.fillRect(b[0], b[1], cw, ch);
  progress += 1;
  ctx.fillStyle = 'blue';
  const px = Math.floor(canvas.width * (progress / total_progress));
  ctx.fillRect(0, canvas.height - 2, px, 2);
}

再來是如何把動畫過程製作影片？

非常簡單！我們可以利用瀏覽器內建的MediaRecorder撘配canvas.captureStream就能作到把canvas的變化內容作為串流輸入一個錄製器，輸出成WebM格式的影片。

底下為主要的相關程式碼。

function startRecAnim() {
  const canvas2 = document.getElementById('canvas2');
  const stream = canvas2.captureStream(25); // 25 FPS
  recorder = new MediaRecorder(stream);
  let chunks = [];
  recorder.ondataavailable = e => chunks.push(e.data);
  recorder.onstop = e => {
    const blob = new Blob(chunks, {type: "video/webm"});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = getWebmFileName();
    a.click();
    recorder = null;
  }
  recorder.start();
}

另外，錄製結束時，只要呼叫recorder.stop()即可停止，並觸發onstop事件。在此事件中，將錄製完成的影片存檔。

最後再利用AI作些畫面美化，就完成了。前後大概只花不到一天。