JS Canvas 像素化一张图片

pixelate an image，选择一张图片，绘制其像素到画布元素上。

js, image

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

$(function() {

// var
    var pixelSize = 15;
    var imgWidth, imgHeight;

// dom
    var $canvas = $('#image');
    var ctx = $canvas[0].getContext('2d');
    var $upload = $('#image-upload');
    var $save = $('#image-save input');

// helpers
    var getAverageRGB = function(imgData) {
        var red = 0;
        var green = 0;
        var blue = 0;
        var total = 0;

for (var i = 0; i < imgData.length; i += 4) {
            if (imgData[i + 3] !== 0) {
                red += imgData[i + 0];
                green += imgData[i + 1];
                blue += imgData[i + 2];
                total++;
            }
        }

var avgRed = Math.floor(red / total);
        var avgGreen = Math.floor(green / total);
        var avgBlue = Math.floor(blue / total);

return 'rgba(' + avgRed + ',' + avgGreen + ',' + avgBlue + ', 1)';
    };

// events
    $upload.change(function(e) {
        var img = new Image();
        img.onload = function() {
            imgWidth = img.width;
            imgHeight = img.height;
            $canvas.attr('width', imgWidth);
            $canvas.attr('height', imgHeight);
            ctx.drawImage(img, 0, 0);
            pixelate(pixelSize);
        };
        img.src = URL.createObjectURL(e.target.files[0]);
    });

$save.click(function() {
        var savedPNG = $canvas[0].toDataURL("image/png");
        window.open(savedPNG, '_blank');
    });

})

编译

CSS

HTML

pixelate an image，选择一张图片，绘制其像素到画布元素上。

js, image

编辑器支持Emmet

快捷键

pixelate an image，选择一张图片，绘制其像素到画布元素上。

js, image

HTML5 Canvas使用图像插值算法制作图片绵羊化特效

HTML5 Canvas把图片转换成ASCII字符拼图

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：