把图片转换成低多边形艺术画作

low poly art generated from user uploaded image

h5, tool, art, 图片处理

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// https://github.com/evansque/polygonize
let src = '';

function updateVisibleValue() {
    document.getElementById('cell-size-value').innerText = document.getElementById('cell-size').value;
    if (src) {
        poly()
    }
}

function loading(show) {
    let loading = document.getElementById('loading');
    loading.style.display = show ? "flex" : "none";
}

编译

CSS

* {
    margin: 0;
    padding: 0;
}
html,
body,
.container {
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
}
input[type="file"] {
    display: none;
}
.button {
    background: #1abc9c;
    color: #fff;
    float: right;
    margin: 10px 10px 10px 0px;
    padding: 13px 18px;
    font-size: 12px;
    border-radius: 3px;
    cursor: pointer;
}
.button:hover {
    background: #18ac8e;
}
.container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: stretch;
    background: #f6f6f6;
}
.container #header {
    height: 60px;
    min-height: 60px;
    background: #34495e;
    z-index: 2;
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
    display: flex;
    flex-flow: row;
}
.container #canvas {
    order: 1;
    flex: 1 1 auto;
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #bbb;
    font-size: 24px;
    padding: 20px;
    text-align: center;
}
.container #canvas canvas {
    max-width: 75%;
    max-height: 75%;
    margin: 0 auto;
    display: block;
    align-self: center;
}
#cell-size {
    width: 60%;
    margin: 28px;
    flex: 1;
}
.cell-size-value-wrapper {
    font-size: 13px;
    color: #fff;
    line-height: 60px;
    padding: 0 15px;
}
input[type=range] {
    -webkit-appearance: none;
    margin: 10px 0;
    width: 100%;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
    background: #fff;
    border-radius: 25px;
    border: 0px solid transparent;
}
input[type=range]::-webkit-slider-thumb {
    box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
    border: 0px solid transparent;
    height: 16px;
    width: 16px;
    border-radius: 8px;
    background: #1abc9c;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -6px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #fff;
}
input[type=range]::-moz-range-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
    background: #fff;
    border-radius: 25px;
    border: 0px solid transparent;
}
input[type=range]::-moz-range-thumb {
    box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
    border: 0px solid transparent;
    height: 16px;
    width: 16px;
    border-radius: 8px;
    background: #1abc9c;
    cursor: pointer;
    margin-top: -6px;
}
.loading {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10;
    line-height: 100%;
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36px;
    display: none;
}

HTML

low poly art generated from user uploaded image

h5, tool, art, 图片处理

编辑器支持Emmet

快捷键

low poly art generated from user uploaded image

h5, tool, art, 图片处理

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

HTML5 Canvas在线把文本或图像转成3D点云动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：