图片粒子化 - 踏得网

将图片变成粒子

粒子

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1567
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var image = new Image();
image.src = '/uploads/user_upload/56822/5be2de07b5207.png';
image.onload = function() {
    context.drawImage(image, 0, 0);
    getPixels();
    drawPixels();
}
var pixels = [];
// 存储像素数据
var space = 1;
// 遗弃部分像素点
// 拾取像素点
function getPixels() {
        var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
        for (var x = 0; x < imageData.width; x += space) {
            for (var y = 0; y < imageData.height; y += space) {
                var i = (y * imageData.width + x) * 4;
                // 通过rgba中的r判断，拾取有色的图片部分
                if (imageData.data[i] > 0) {
                    pixels.push({
                        x: x,
                        y: y,
                        fillStyle: 'rgba(' + imageData.data[i] + ',' + imageData.data[i + 1] + ',' + imageData.data[i + 2] + ',' + imageData.data[i + 3] + ')'
                    })
                }
            }
        }
        console.log(pixels.length);
    }
    // 将保存的像素点重新绘制
function drawPixels() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    var scale = 2; // 缩放
    var pos = {
        x: 100,
        y: 50
    }; // 改变绘制起始位置
    for (var i = 0; i < pixels.length; i++) {
        context.fillStyle = pixels[i].fillStyle;
        context.fillRect(pixels[i].x * scale + pos.x + Math.random() * 10, pixels[i].y * scale + pos.y + Math.random() * 10, 1, 1);
        context.fillRect(pixels[i].x + 500, pixels[i].y + 200, 1, 1);
    }
}

编译

CSS

HTML