怎么说呢，要想完美的转换... 好难... 仅靠单像素颜色来识别出鹦鹉的轮廓还是不太可行...
也许把周围像素的颜色考虑进去是个办法... 不过这图挺大的...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.bird {
width: 400px;
height: calc(1440 * 400 / 1920 * 1px);
}
canvas.bird {
background: #ccc;
}
</style>
</head>
<body>
<img id="img" class="bird" src="./bird.jpg">
<canvas id="canvas" width="1920" height="1440" class="bird"></canvas>
<script type="text/javascript">
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
let img = document.getElementById('img')
img.addEventListener('load', () => {
ctx.drawImage(img, 0, 0)
let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
let data = imageData.data
for (let i = 0; i < data.length; i += 4) {
if (isBird(data, i, canvas.width, canvas.height)) {
;[data[i], data[i + 1]] = [data[i + 1] * 1.2, data[i]]
}
}
ctx.putImageData(imageData, 0, 0)
})
function isBird (data, i, width, height) {
let r = data[i]
let g = data[i + 1]
let b = data[i + 2]
let [h, s, l] = rgb2hsl(r, g, b)
return h < 200 && h > 80 && s > 0.23 && l < 0.84
}
function rgb2hsl (r, g, b) {
let r1 = r / 255
let g1 = g / 255
let b1 = b / 255
let min = Math.min(r1, g1, b1)
let max = Math.max(r1, g1, b1)
let l = (min + max) / 2
let s
let h
if (l < 0.5) {
s = (max - min) / (max + min)
} else {
s = (max - min) / (2 - max - min)
}
if (max === r1) {
h = (r1 - b1) / (max - min)
} else if (max === g1) {
h = 2 + (b1 - r1) / (max - min)
} else if (max === b1) {
h = 4 + (r1 - g1) / (max - min)
}
h *= 60
while (h < 0) {
h += 360
}
return [h, s, l]
}
</script>
</body>
</html>
2019-04-28怎么说呢，要想完美的转换... 好难... 仅靠单像素颜色来识别出鹦鹉的轮廓还是不太可行...
2019-04-27我是入门的，第一次学这个前段知识，是不是不太合适，要看第二遍才可以…… 1 5
2019-11-11我来给个答案吧，乍一看 感觉需要用到很多cv领域的技术，模式识别判定轮廓，然后根据色值不同进行greenToRed转译。后来想了一下，这明明是前端的课程嘛，按cv的解决方案，难道还要把opencv编译到wasm里？转念一想，其实css滤镜就能做这事儿，试了试 几行css代码能做的事 在opencv要引一大堆库 改一大堆参数了 4
2019-07-21CMYK，为什么有K，一方面是成本，另一方面是因为自然界的CMY不能合成纯黑的颜色，所以需要纯黑 3
2020-01-03老师在末尾提到了border、box-shadow、border-radius可以产生一些CSS黑魔法，而不是只定义边框、阴影和圆角，这里我很想知道，除了基本用途，他们可以产生什么样的黑魔法呢？有没有一些推荐的资料呢？ 1
2019-04-28canvas可以得到每个像素的rgb分量，是不是把蓝色和红色的值换一下就可以了？ 1
2019-07-12原本实现控制RGB范围来手动抠图，不过在使用的时候发现并不直观，调整起来很随缘，回看了一遍课程才发现重点是HSL调色，改进之后还是能比较精准（主要是直观）的把鹦鹉给单独替换颜色了
2019-04-29请问老师，我后台用的是Tomcat服务器，前端用ajax请求静态资源时会间隔会报412，也就是一次成功进入后台，一次报412，这该怎么解决呢？
2019-04-28HSL感觉还是绘画游戏原画之类用得多，编程领域反而挺少，无论h5游戏还是客户端游戏理解一般都是rgb/rgba