- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
创建没有绿色的复制此图像或使绿色透明或从 100X100 px 左上角删除绿色的最快方法是什么
在这种情况下我是否必须检查每个像素值?这个过程太慢了,例如:对于 100X100px,需要 40000 次循环来检查所有 rgba 值
最佳答案
在支持它的浏览器中,您可以使用 svg 过滤器来做到这一点:
这里是an other Q/A这展示了一种针对固定颜色执行此操作的有趣方法。
这里我做了一个简单的辅助函数,它将为我们设置所需的 tableValues
带着一点宽容,我删除了 <feFill>
因此所选颜色变得透明( <feFill>
会污染 Chrome 中的 Canvas )。如果您想替换颜色,您仍然可以使用 Canvas 的合成选项来实现它(下面的代码片段中的注释代码)。
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = e => {
canvas.width = img.width;
canvas.height = img.height;
// update our filter
updateChroma([76, 237, 0], 8);
// if you wish to replace the color, uncomment followings
// ctx.fillStyle = "your_replaceColor";
// ctx.fillRect(0,0,img.width,img.height);
ctx.filter = 'url(#chroma)';
ctx.drawImage(img, 0, 0);
ctx.filter = 'none';
// ctx.globalCompositeOperation = 'destination-in';
// ctx.drawImage(img, 0,0);
};
img.src = "/image/hZm8o.png";
function updateChroma(rgb, tolerance) {
const sels = ['R', 'G', 'B'];
rgb.forEach((value, ind) => {
const fe = document.querySelector('#chroma feFunc' + sels[ind]);
let vals = '';
if (!value) {
vals = '0'
} else {
for (let i = 0; i < 256; i++) {
vals += (Math.abs(value - i) <= tolerance) ? '1 ' : '0 ';
}
}
fe.setAttribute('tableValues', vals);
});
}
canvas {
background: ivory
}
<svg width="0" height="0" style="position:absolute;visibility:hidden">
<filter id="chroma" color-interpolation-filters="sRGB"x="0" y="0" height="100%" width="100%">
<feComponentTransfer>
<feFuncR type="discrete"/>
<feFuncG type="discrete"/>
<feFuncB type="discrete"/>
</feComponentTransfer>
<feColorMatrix type="matrix" values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
1 1 1 1 -1" result="selected"/>
<feComposite in="SourceGraphic" in2="selected" operator="out"/>
</filter>
</svg>
<canvas id="canvas"></canvas>
我没有在许多设备上进行广泛的测试,但在启用硬件加速的情况下,这可能比任何像素循环表现更好,因为它应该全部在 GPU 上完成。
<小时/>但是浏览器支持仍然不是那么好......
所以无论如何你可能需要回退到像素操纵。
在这里,根据您要进行色度处理的对象,您可能需要牺牲一些质量来换取速度。
例如,在视频中,您可以在缩小的 Canvas 上执行色度,然后通过在主 Canvas 上合成来将其拉回,从而在每帧中赢得几次迭代。看这个previous Q/A举个例子。
关于javascript - HTML5 Canvas |替换颜色 |去除颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52713456/
给定一个字符串"5 900 000" 我想通过以下模式使用 gsub 去除空格: gsub(/\s/, '') 但这似乎行不通。也没有: gsub(' ', '') 最佳答案 如果你想就地替换,你需要
我编写了一个程序来抓取网站以获取数据并输出到 Excel 表。该程序使用 Microsoft Visual Studio 2010 用 C# 编写。 大多数时候,我从网站获取内容、解析内容并将数据存储
在 MS Access 2007 项目报告中,我有以下(已编辑)查询: SELECT SomeCol FROM SomeTable 问题是, SomeCol 显然包含一些不可见的字符。例如,我看到一个
如 Removing left recursion 中所述,有两种方法可以去除左递归。 使用一些过程修改原始语法以删除左递归 写文法原来没有左递归 人们通常使用什么来删除(没有)ANTLR 的左递归?
我在 CoreData 中存储了一堆艺术家,并希望按名称对它们进行排序,但忽略前缀“the”。例如,“The Beatles”将被排序为“Beatles”,有点像 iTunes/iPod 的做法。 因
我有一个 WebView ,我想从中删除弹性。现在,当滚动小于 webview 的页面时,它会产生弹性效果,显示下面的背景。我想删除这个。 我尝试过执行以下操作,但没有成功。它找到了 WebDynam
我正在调查我们公司使用 Prometheus 从我们在 Kubernetes 上运行的实验中收集统计数据。有计划使用标签来标记我们的云/集群中特定实验的名称。这意味着我们将生成大量标签,这些标签会随着
我正在添加聚合物元素。我想在单击其(自己的)图像时删除元素(自我)。根据封装,我将不得不让 parent 删除 child 。但这也需要为母体生成聚合物元素(我在这里吗??)。 children.ad
现在如果我点击按钮 A,按钮 B 会显示 DropShadow 效果: Private Sub ButtonA_Click(ByVal sender As System.Object, ByVal
我尝试过这个,但它对我不起作用: char * remove_nl(char * newstr) { newstr = strdup(newstr); newstr[strlen(ne
我陷入了两难境地。我有一个图像,我想占据网页的背景。我希望它横跨屏幕的宽度和高度,并保持那个尺寸。当我使用 标签,我不知道如何将它拉伸(stretch)到没有白条的屏幕上。 wspace 和 hspa
Jade .foo .foo 结果 想要的结果 在 haml 中我会做类似 .foo>< 的事情但这在 Jade 中不起作用。我已经搜索并空手而归如何处理这个问题。我如何达到预期的结果
我是 Maven 的新手,当我尝试将我当前的项目从使用 Ant 转换为 -> 使用 Maven 时遇到了问题。 那个项目需要很多 Jar,我在 mvnrepository 上查找这些 jar 并将它们
我需要一个正则表达式来删除 xml 标记开头和结尾之间的空格。例如:有人创建 xml 并将其发送给我,这样我就可以验证、签名并发送到网络服务。 为此,我需要删除标签开头和结尾之间的空格: String
我写了几个方法来将项目添加到数组中,如果它们已经在数组中,它们将被忽略。在对数据结构做了一些研究之后,我意识到我可以通过简单地将它们放在一个集合中来摆脱重复(特别是因为我不关心对象的顺序)。然而,在玩
使用 HighCharts,我想移除 SVG 曲线上的抗锯齿。 到目前为止,我正在使用这个: $('path').each(function(i,j){$(j).attr('shape-renderi
由于某些奇怪的原因(黑色但不是黑色部分),我的 SeekBar 和拇指后面出现随机阴影。我该如何摆脱它? 我的搜索栏: 拇指.xml progress_appearance.xml(有一些
我有一个 Url,我想获取路径部分但没有尾随文件名。如果 Url 是 http://my.com/dir1/dir2/file.ext 那么我想获取 /dir1/dir2 . 我已经尝试了各种拆分(l
我有这个字符串: dataSourceURL = URL(string:"https://api.abc.com/api/p4/products?pid=uid8225&format=json&off
在我的网页中,我有一个菜单 (HorizontalPanel) 应该隐藏在页面的底部。为此,我尝试使用 RootLayoutPanel 类并在其中添加一个 south 小部件,我成功地做到了。但问
我是一名优秀的程序员,十分优秀!