在canvas中制作三角形马塞克图片

可以调节图片马赛克特效的质量和上传自己的图片。

canvas，图片特效

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

第三方库
作品简介 1698
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

paper.install(window);
paper.setup('myCanvas');
var triangleAmount = 30;
triangle();

function triangle() {
    var raster = new Raster('img');
    var imgWidth = document.getElementById("img").naturalWidth;
    var imgHeight = document.getElementById("img").naturalHeight;
    raster.visible = false;
    var length = triangleAmount;
    raster.on('load', function() {
        raster.size = new Size(length, length);

for (var y = 0; y < raster.height; y++) {
            for (var x = 0; x < raster.width; x++) {
                var color = raster.getPixel(x, y);

var path = new Path.RegularPolygon(new Point(x / length * 500, y / length * 500), 3, 20);
                path.fillColor = color;
            }
        }
        project.activeLayer.position = view.center;
    });

project.activeLayer.position = view.center;
}

function readURL(input) {

if (input.files && input.files[0]) {
        var reader = new FileReader();

reader.onload = function(e) {
            $('#img').attr('src', e.target.result);
            triangle();
        }

reader.readAsDataURL(input.files[0]);
    }
}

$("#upload").change(function() {
    readURL(this);
});

$("input[type='range']").change(function() {
    triangleAmount = parseInt($(this).val());
    console.log(triangleAmount);
    project.activeLayer.removeChildren();
    triangle();
});

$("img").click(function(event) {
    $('#img').attr('src', event.target.src);
    project.activeLayer.removeChildren();
    triangle();
});

编译

CSS

HTML

可以调节图片马赛克特效的质量和上传自己的图片。

canvas，图片特效

编辑器支持Emmet

快捷键

可以调节图片马赛克特效的质量和上传自己的图片。

canvas，图片特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：