今天郭先生說一下用canvas解析圖片流，然後製作一個動態二維碼的小案例，話不多說先上圖，線上案例點選部落格原文。這是郭先生的微信二維碼哦！

1. 解析圖片流

canvas = document.createElement('canvas');//建立canvas畫布

content = canvas.getContext('2d');//獲取畫布的上下文

canvas.width = 310;//設定尺寸

canvas.height = 310;

img = new Image();//建立一張圖片

img.src = require("../assets/images/base/wechat.png");//設定圖片地址
 

img.onload = () => {

        //在圖片載入後

    content.drawImage(img, 0, 0, canvas.width, canvas.height);//將圖片新增到畫布，並設定寬高

    imgData = content.getImageData(0, 0, canvas.width, canvas.height).data;//獲取畫布資料

};

imgData是什麼樣的呢？如下圖

這是一個Uint8ClampedArray的型別化陣列，這個陣列出現最多的也是在imgData上。它會將負數歸入0，大於255的數歸入255，所以取模就不用了。我們再來看這個陣列的長度是384400是怎麼來的呢？因為我們設定了畫布長寬為310，而imgData四位代表一個rgba畫素點，也就是imgData[0]是紅色通道，imgData[1]是綠色通道，imgData[2]是藍色通道，imgData[3]是透明通道…依次迴圈，所以310 * 310 * 4 = 384400。

2. 處理畫素點，畫出二維碼

for (var i = 0; i < 31 * 31; i++) {

        //random_position為各個小平面塊打亂時的位置資訊，我設定小平面一共有31 * 31個

    random_position.push([Math.floor(Math.random() * 300 - 150), Math.floor(Math.random() * 300 - 150), Math.floor(Math.random() * 300 - 150)])

}

var color = new Array(310).fill('').map(d => []);//color設定成310個陣列
 

for (var i = 0; i < 310; i++) {

    for (var j = 0; j < 310; j++) {

        let clr = imgData[(i * 310 + j) * 4] + imgData[(i * 310 + j) * 4 + 1] + imgData[(i * 310 + j) * 4 + 2];

        clr = clr > 382 ? 'light' : 'black'; //因為顏色是有深色塊和淺色塊組成，他們的分界就是rgb通道顏色值之和小於等於127+127+127之和。

        color[i].push(clr)//每個陣列有310項，每項的值為'light'或者'black'

    }

}

var color1 = [];//設定color1為小平面顏色陣列31 * 31。

color.filter((d, i) => (i + 6) % 10 == 0).forEach((dd, ii) => color1[ii] = dd.filter((d, i) => (i + 6) % 10 == 0));//每10個畫素，篩選出1個畫素作為小平面的顏色，選取的位置儘量在10個的中間選擇，畢竟有的圖片比較模糊。

for (var i = 0; i < color1.length; i++) {//31 * 31的迴圈

    for (var j = 0; j < color1[i].length; j++) {

        var geometry = new THREE.PlaneGeometry(10, 10);

        var material = new THREE.MeshBasicMaterial({

            color: 0xffffff,

            side: THREE.DoubleSide,

            transparent: true,

            opacity: color1[i][j] == 'black' ? 0 : 1,

        });

        var mesh = new THREE.Mesh(geometry, material);//小方塊網格

        origin_position.push([j * 10 - 15 * 10, 15 * 10 - i * 10, 0]);//儲存序列換後小方塊的位置

        mesh.position.set(random_position[j + i * j][0], random_position[j + i * j][1], random_position[j + i * j][2]);//先將小方塊的位置設定成打亂的位置，便於動畫播放。

        mesh.name = 'plane';

        group.add(mesh);//將所有小平面放到陣列，便於操作。

    }

}

scene.add(group);

這部分程式碼主要是計算部分，沒什麼技術含量。

3. 實現tween動畫

var pos = { time: 0 };

tween1 = new TWEEN.Tween(pos).to({ time: 1 }, 3000);

tween2 = new TWEEN.Tween(pos).to({ time: 0 }, 3000);

tween1.easing(TWEEN.Easing.Quadratic.In);

tween2.easing(TWEEN.Easing.Quadratic.Out);

tween1.onUpdate(onUpdate);

tween2.onUpdate(onUpdate);

tween1.start();

function onUpdate() {

    let time = this._object.time;

    group.children.forEach((d, i) => {

        d.position.set(time * origin_position[i][0] + (1 - time) * random_position[i][0], time * origin_position[i][1] + (1 - time) * random_position[i][1], (1 - time) * random_position[i][2]);

    })

}

這部分只是用了tween的基礎功能，請自行檢視tween檔案。

轉載請註明地址：郭先生的部落格