使用js实现对图像的艺术处理

最新推荐文章于 2021-12-09 13:46:21 发布

chileique7275

最新推荐文章于 2021-12-09 13:46:21 发布

阅读量290

点赞数

文章标签：人工智能 javascript ViewUI

原文链接：https://my.oschina.net/chinacaptain/blog/400163

版权

index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>基于canvas和createjs的图片艺术处理工具</title>
    <script src="easeljs-0.8.0.min.js"></script>
    <style type="text/css">


    /* contnet */
    * {margin: 0;padding: 0;}
    body {font-size: 12px; margin: 10px; font-family: simsun; background: #fff;}
    p { height: 12px;}
    p.ts { margin: 10px 0 0 0; width: 500px; float: left;}
    span {width: 12px;}
    #cv, #txt {float: left;}
    #cv { margin-right: 5px;}
    .bt{ height: 37px; }
    form, input {width: 73px;height: 27px;}
    form {
        position: relative;
        float: left;
        margin: 0 10px 0 0;
    }
    #up-button{
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
        opacity: 0;
        filter: alpha(opacity=0);
        outline: none;
    }
    #button{
    }
    iframe {display: none;}
</style>
</head>
<body id="body">


<div class="bt">
    <form id="uf">
        <input type="file" name="file" id="up-button"/>
        <input type="button" id="button" value="选择图片"/>
    </form>
</div>

<canvas id="cv"></canvas>

<script src="js/app.js" type="text/javascript"></script>
</body>
</html>

app.js

var cv = document.getElementById('cv');
var c = cv.getContext('2d');

var fileBtn = document.getElementById("up-button");
var img = new Image();
var data;
var canvas;
img.src = 'jiejing.jpg';
img.onload = init; // 图片加载完开始转换
fileBtn.onchange = getImg;



// 根据灰度生成相应字符
function getColor(g) {
    if (g <= 30) {
        return '#000';
    } else if (g > 30 && g <= 60) {
        return '#333';
    } else if (g > 60 && g <= 120) {
        return '#666';
    }  else if (g > 120 && g <= 150) {
        return '#999';
    } else if (g > 150 && g <= 180) {
        return '#bbb';
    } else if (g > 180 && g <= 210) {
        return '#ccc';
    } else if (g > 210 && g <= 240) {
        return '#eee';
    }  else {
        return '#fff';
    }

}


// 根据rgb值计算灰度
function getGray(r, g, b) {
    return 0.299 * r + 0.578 * g + 0.114 * b;
}

// 转换
function init() {
    console.log(document.getElementById('body').childNodes.length);
    var body = document.getElementById('body');
    if(body.childNodes.length>7){
        body.removeChild(body.childNodes[6]);
    }


    cv.width = img.width;
    cv.height = img.height;
    c.drawImage(img, 0, 0);
    var imgData = c.getImageData(0, 0, img.width, img.height);
    var imgDataArr = imgData.data;
    var imgDataWidth = imgData.width;
    var imgDataHeight = imgData.height;

    var stage;
    canvas = document.createElement('canvas');
    canvas.setAttribute('width',img.width);
    canvas.setAttribute('height',img.height);
    canvas.setAttribute('id','canvas');
    document.getElementById("body").appendChild(canvas);
    stage = new createjs.Stage("canvas");
    data = new Array(imgDataWidth,imgDataHeight);
    for (h = 0; h < imgDataHeight; h++) {
        for (w = 0; w < imgDataWidth; w++) {
            var index = (w + imgDataWidth * h) * 4;
            var r = imgDataArr[index + 0];
            var g = imgDataArr[index + 1];
            var b = imgDataArr[index + 2];
            var gray = getGray(r, g, b);

            var s = new createjs.Shape();
            var g = s.graphics;
            g.setStrokeStyle(1);
            g.beginStroke(getColor(gray));
            g.drawRect(w,h,1,1);

            stage.addChild(s);

        }
    }
    stage.update();

}

// 获取图片
function getImg(file) {
    var reader = new FileReader();
    reader.readAsDataURL(fileBtn.files[0]);
    reader.onload = function () {
        img.src = reader.result;
    }
}

效果图

转载于:https://my.oschina.net/chinacaptain/blog/400163