找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发JS简陋版图片去色、取色

2018-12-14 分类：JavaScript 阅读(916) 评论(0)
游戏前端开发 技能
引擎游戏前端开发
游戏前端开发 知乎

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”UTF-8″ />
        <title></title>
    </head>
    <body>
        <div class=”wrap”>
            <h1>去色系统</h1>
            <div>
                <input type=”file” id=”fileInput” /> <button>打开图片</button>
            </div>
        </div>
        <div id=”mianban”><span>颜色</span><i></i> <button>去色</button></div>
        <canvas id=”canvas”></canvas>
        <script>
            quse.start(‘fileInput’)
        </script>
    </body>
</html>

javascript 代码

;(function(w) {
    var quse = {
        colors: [],
        getUrl: function(obj) {
            var url
            url = window.webkitURL.createObjectURL(obj.files.item(0))
            return url
        },
        bing: function(obj) {
            var self = this
            obj.onchange = function() {
                var img = self.createImage(self.getUrl(this))
            }
        },
        createImage: function(url) {
            var img = new Image()
            img.src = url
            var self = this
            img.onload = function() {
                self.putImage(img)
            }
        },
        putImage: function(img) {
            var canvas = document.getElementById(‘canvas’)
            var ctx = canvas.getContext(‘2d’)
            var imgWidth = (canvas.width = img.width)
            var imgHeight = (canvas.height = img.height)
            canvas.style.marginLeft = -imgWidth / 2 + ‘px’
            ctx.drawImage(
                img,
                0,
                0,
                imgWidth,
                imgHeight,
                0,
                0,
                imgWidth,
                imgHeight,
            )
            this.bindCanvas(canvas)
        },
        start: function(id) {
            var fileInput = document.getElementById(‘fileInput’)
            this.bing(fileInput)
        },
        bindCanvas: function(canvas) {
            var self = this
            canvas.onmousedown = function(e) {
                this.down = true
                this.style.cursor = ‘crosshair’
                if (this.down) {
                    var x = e.pageX,
                        y = e.pageY
                    var left = x – this.offsetLeft,
                        top = y – this.offsetTop
                    self.getColor(this, { x: left, y: top })
                }
            }
            canvas.onmousemove = function(e) {
                if (this.down) {
                    var x = e.pageX,
                        y = e.pageY
                    var left = x – this.offsetLeft,
                        top = y – this.offsetTop
                    self.getColor(this, { x: left, y: top })
                }
            }
            canvas.onmouseup = function() {
                this.down = false
                this.style.cursor = ‘default’
            }
        },
        getColor: function(canvas, obj) {
            var ctx = canvas.getContext(‘2d’)
            var imgData = ctx.getImageData(obj.x, obj.y, 1, 1)
            var self = this
            var r = imgData.data[0],
                g = imgData.data[1],
                b = imgData.data[2]
            var span = document
                .getElementById(‘mianban’)
                .getElementsByTagName(‘span’)[0]
            var i = document
                .getElementById(‘mianban’)
                .getElementsByTagName(‘i’)[0]
            var btn = document
                .getElementById(‘mianban’)
                .getElementsByTagName(‘button’)[0]
            span.innerHTML = ‘颜色 : ‘ + this.RGB(r, g, b)
            i.style.background = this.RGB(r, g, b)
            this.colors = [r, g, b]
            if (!btn.jianting) {
                btn.jianting = true
                btn.onclick = function() {
                    if (confirm(‘是否需要模糊匹配?’)) {
                        self.quse(canvas, ctx, true)
                    } else {
                        self.quse(canvas, ctx, false)
                    }
                }
            }
        },
        quse: function(canvas, ctx, o) {
            var data = ctx.getImageData(0, 0, canvas.width, canvas.height)
            var r = this.colors[0],
                g = this.colors[1],
                b = this.colors[2]
            for (var i = 0; i < data.data.length; i += 4) {
                var newdata = data.data
                var r1 = newdata[i + 0],
                    g1 = newdata[i + 1],
                    b1 = newdata[i + 2]
                if (o) {
                    var r3 = (r – r1) / 256,
                        g3 = (g – g1) / 256,
                        b3 = (b – b1) / 256
                    var bai = (1 – Math.sqrt(r3 * r3 + g3 * g3 + b3 * b3)) * 100
                    if (bai > 90) {
                        data.data[i + 3] = 0
                    }
                } else {
                    if (r1 == r && g1 == g && b1 == b) {
                        data.data[i + 3] = 0
                    }
                }
            }
            ctx.clearRect(0, 0, canvas.width, canvas.height)
            ctx.putImageData(data, 0, 0)
        },
        RGB: function(r, g, b) {
            var str =
                ‘#’ + r.toString(16) + ” + g.toString(16) + ” + b.toString(16)
            return str
        },
    }
    w.quse = quse
})(window)

css 代码

    background: #f0f0f0;
}
* {
    margin: 0;
    padding: 0;
}
canvas {
    background: transparent;
    position: absolute;
    left: 50%;
    top: 120px;
}
#fileInput {
    opacity: 0;
    height: 40px;
    width: 120px;
}
button {
    background: deepskyblue;
    color: #fff;
    width: 120px;
    height: 40px;
    border: 0;
    border-radius: 4px;
    outline: none;
}
.wrap {
    padding-top: 50px;
    position: absolute;
    width: 300px;
    left: 50%;
    margin-left: -150px;
}
.wrap div {
    position: absolute;
    right: 0;
    top: 45px;
    width: 120px;
}
.wrap div button {
    position: absolute;
    top: 0;
    z-index: -1;
}
#mianban {
    background: rgba(255, 255, 255, 0.8);
    width: 160px;
    padding: 10px 20px;
    position: absolute;
    right: 0;
    height: 330px;
    top: 50%;
    margin-top: -175px;
    color: #333;
    border-radius: 4px 0 0 4px;
    border: 1px solid #cccccc;
}
#mianban p:first-child {
    margin-top: 30px;
}
#mianban p i {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #00bfff;
    border-radius: 2px;
    position: relative;
    left: 10px;
    top: 4px;
    background: rgb(230, 230, 230);
}
#mianban button {
    display: block;
    position: static;
    margin: 0 auto;
    margin-top: 30px;
}

完整的运行
html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”UTF-8″ />
        <title></title>
        <script>
            ;(function(w) {
                var quse = {
                    colors: [],
                    getUrl: function(obj) {
                        var url
                        url = window.webkitURL.createObjectURL(
                            obj.files.item(0),
                        )
                        return url
                    },
                    bing: function(obj) {
                        var self = this
                        obj.onchange = function() {
                            var img = self.createImage(self.getUrl(this))
                        }
                    },
                    createImage: function(url) {
                        var img = new Image()
                        img.src = url
                        var self = this
                        img.onload = function() {
                            self.putImage(img)
                        }
                    },
                    putImage: function(img) {
                        var canvas = document.getElementById(‘canvas’)
                        var ctx = canvas.getContext(‘2d’)
                        var imgWidth = (canvas.width = img.width)
                        var imgHeight = (canvas.height = img.height)
                        canvas.style.marginLeft = -imgWidth / 2 + ‘px’
                        ctx.drawImage(
                            img,
                            0,
                            0,
                            imgWidth,
                            imgHeight,
                            0,
                            0,
                            imgWidth,
                            imgHeight,
                        )
                        this.bindCanvas(canvas)
                    },
                    start: function(id) {
                        var fileInput = document.getElementById(‘fileInput’)
                        this.bing(fileInput)
                    },
                    bindCanvas: function(canvas) {
                        var self = this
                        canvas.onmousedown = function(e) {
                            this.down = true
                            this.style.cursor = ‘crosshair’
                            if (this.down) {
                                var x = e.pageX,
                                    y = e.pageY
                                var left = x – this.offsetLeft,
                                    top = y – this.offsetTop
                                self.getColor(this, { x: left, y: top })
                            }
                        }
                        canvas.onmousemove = function(e) {
                            if (this.down) {
                                var x = e.pageX,
                                    y = e.pageY
                                var left = x – this.offsetLeft,
                                    top = y – this.offsetTop
                                self.getColor(this, { x: left, y: top })
                            }
                        }
                        canvas.onmouseup = function() {
                            this.down = false
                            this.style.cursor = ‘default’
                        }
                    },
                    getColor: function(canvas, obj) {
                        var ctx = canvas.getContext(‘2d’)
                        var imgData = ctx.getImageData(obj.x, obj.y, 1, 1)
                        var self = this
                        var r = imgData.data[0],
                            g = imgData.data[1],
                            b = imgData.data[2]
                        var span = document
                            .getElementById(‘mianban’)
                            .getElementsByTagName(‘span’)[0]
                        var i = document
                            .getElementById(‘mianban’)
                            .getElementsByTagName(‘i’)[0]
                        var btn = document
                            .getElementById(‘mianban’)
                            .getElementsByTagName(‘button’)[0]
                        span.innerHTML = ‘颜色 : ‘ + this.RGB(r, g, b)
                        i.style.background = this.RGB(r, g, b)
                        this.colors = [r, g, b]
                        if (!btn.jianting) {
                            btn.jianting = true
                            btn.onclick = function() {
                                if (confirm(‘是否需要模糊匹配?’)) {
                                    self.quse(canvas, ctx, true)
                                } else {
                                    self.quse(canvas, ctx, false)
                                }
                            }
                        }
                    },
                    quse: function(canvas, ctx, o) {
                        var data = ctx.getImageData(
                            0,
                            0,
                            canvas.width,
                            canvas.height,
                        )
                        var r = this.colors[0],
                            g = this.colors[1],
                            b = this.colors[2]
                        for (var i = 0; i < data.data.length; i += 4) {
                            var newdata = data.data
                            var r1 = newdata[i + 0],
                                g1 = newdata[i + 1],
                                b1 = newdata[i + 2]
                            if (o) {
                                var r3 = (r – r1) / 256,
                                    g3 = (g – g1) / 256,
                                    b3 = (b – b1) / 256
                                var bai =
                                    (1 –
                                        Math.sqrt(
                                            r3 * r3 + g3 * g3 + b3 * b3,
                                        )) *
                                    100
                                if (bai > 90) {
                                    data.data[i + 3] = 0
                                }
                            } else {
                                if (r1 == r && g1 == g && b1 == b) {
                                    data.data[i + 3] = 0
                                }
                            }
                        }
                        ctx.clearRect(0, 0, canvas.width, canvas.height)
                        ctx.putImageData(data, 0, 0)
                    },
                    RGB: function(r, g, b) {
                        var str =
                            ‘#’ +
                            r.toString(16) +
                            ” +
                            g.toString(16) +
                            ” +
                            b.toString(16)
                        return str
                    },
                }
                w.quse = quse
            })(window)
        </script>
        <style type=”text/css”>
            html {
                background: #f0f0f0;
            }
            * {
                margin: 0;
                padding: 0;
            }
            canvas {
                background: transparent;
                position: absolute;
                left: 50%;
                top: 120px;
            }
            #fileInput {
                opacity: 0;
                height: 40px;
                width: 120px;
            }
            button {
                background: deepskyblue;
                color: #fff;
                width: 120px;
                height: 40px;
                border: 0;
                border-radius: 4px;
                outline: none;
            }
            .wrap {
                padding-top: 50px;
                position: absolute;
                width: 300px;
                left: 50%;
                margin-left: -150px;
            }
            .wrap div {
                position: absolute;
                right: 0;
                top: 45px;
                width: 120px;
            }
            .wrap div button {
                position: absolute;
                top: 0;
                z-index: -1;
            }
            #mianban {
                background: rgba(255, 255, 255, 0.8);
                width: 160px;
                padding: 10px 20px;
                position: absolute;
                right: 0;
                height: 330px;
                top: 50%;
                margin-top: -175px;
                color: #333;
                border-radius: 4px 0 0 4px;
                border: 1px solid #cccccc;
            }
            #mianban p:first-child {
                margin-top: 30px;
            }
            #mianban p i {
                display: inline-block;
                width: 20px;
                height: 20px;
                border: 1px solid #00bfff;
                border-radius: 2px;
                position: relative;
                left: 10px;
                top: 4px;
                background: rgb(230, 230, 230);
            }
            #mianban button {
                display: block;
                position: static;
                margin: 0 auto;
                margin-top: 30px;
            }
        </style>
    </head>
    <body>
        <div class=”wrap”>
            <h1>去色系统</h1>
            <div>
                <input type=”file” id=”fileInput” /> <button>打开图片</button>
            </div>
        </div>
        <div id=”mianban”><span>颜色</span><i></i> <button>去色</button></div>
        <canvas id=”canvas”></canvas>
        <script>
            quse.start(‘fileInput’)
        </script>
    </body>
</html>
手机游戏前端开发
花都 前端游戏开发公司
游戏前端开发笔试题
赞(0)
前端开发者 » 前端开发JS简陋版图片去色、取色
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论