- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试制作网络工具,允许人们替换我正在销售的简单 2 色图像中的颜色。我使用的图像以 jpg 格式保存。我确实到处查看,并且确实想出了以下代码:
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
img = new Image();
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img,0,0,canvas.width,canvas.height);
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var pixelArray = imageData.data;
var length = pixelArray.length / 4;
for (var i = 0; i < length; i++) {
var index = 4 * i;
var r = pixelArray[index];
var g = pixelArray[++index];
var b = pixelArray[++index];
var a = pixelArray[++index];
if (r === 0 && g === 0 && b === 0 & a === 255) {
pixelArray[--index] = 47;
pixelArray[--index] = 255;
pixelArray[--index] = 173;
}
}
context.putImageData(imageData, 0, 0);
}
img.src = "assets/images/tijana-mala.jpg";
不幸的是,我意识到许多像素不仅仅是“黑色或白色”,而且还有不同的色调。图像的复杂性相当简单,我出售报价:背景上的文本,使用各种字体。
有没有办法在我的代码之外做到这一点?
谢谢
附注我的竞争对手成功了: http://www.crownprintsart.com/color用户名:您的电子邮件地址密码:crownprintsdemo
最佳答案
在我建议的方法中,我们可以首先根据颜色的“亮度”将黑色数据转换为 Alpha channel 。这将保留抗锯齿功能,这是边缘出现各种阴影的原因,并允许我们使用合成模式。
尽管没有说明,如果黑色不是纯黑色(即实际上是深灰色),我们可以通过组合使用简单的阈值来压缩范围。
然后使用 source-atop
合成模式为白色背景着色,最后使用 destination-atop
绘制新的黑色颜色(现在是 Alpha channel )合成模式。
使用合成模式可以更好地提高性能,因为您不必费心手动混合颜色。
另一种方法是使用阈值。如果颜色(灰色/亮度)高于某个值,则将其转换为颜色 A,如果低于某个值,则将其转换为颜色 B 等。
但是,这样做的问题是,抗锯齿边缘会失去其目的,并成为边缘的实心部分,这是不可取的,因为边缘最终会呈锯齿状,就像没有抗锯齿一样。我们可以通过使用非常高分辨率的原始图像来减少问题,然后将其缩小,但代价是需要迭代更多的数据。
我们还可以手动混合颜色。使用其中一个 channel 的值作为归一化亮度/灰度值,并根据该值混合两种颜色(伪):
luma = redColor / 255; // or green/blue assuming image is grey-scale
newColor = Math.round(colorA * luma + colorB * (1 - luma));
此示例使用第一种技术。下面的灰色是浏览器背景色,用于显示 Alpha channel -
最终结果
var img = new Image,
ctx = c.getContext("2d");
img.onload = setup;
img.crossOrigin = "";
img.src = "https://i.imgur.com/ZJHabAD.jpg";
function setup() {
// draw in image (scaled for demo)
c.width = this.naturalWidth;
c.height = this.naturalHeight;
ctx.drawImage(this, 0, 0);
// create alpha channel from "black" pixels
var idata = ctx.getImageData(0, 0, c.width, c.height),
data = idata.data;
for(var i = 0, v; i < data.length; i += 4) {
v = data[i];
if (v < 30) v = 0; // compress grey to black (arbitrary threshold here)
data[i+3] = v;
}
ctx.putImageData(idata, 0, 0);
// replace white color
ctx.fillStyle = "#AF4979";
ctx.globalCompositeOperation = "source-atop";
ctx.fillRect(0, 0, c.width, c.height);
// replace "black" (alpha)
ctx.fillStyle = "#C6AF47";
ctx.globalCompositeOperation = "destination-atop";
ctx.fillRect(0, 0, c.width, c.height);
}
body {background:#777}
<canvas id=c></canvas>
关于javascript - 替换 Canvas 中的特定颜色及其阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37036631/
如何在 XNA 中用图元(线条)制作的矩形周围制作阴影效果?我目前正在制作我的矩形,方法是将图元放入我制作的批处理中,然后添加纹理作为它们的背景。这些矩形应该象征着“ window ”。 我希望它们也
我刚刚在引擎中安装了照明系统。在以下屏幕截图中,您可以看到一个亮起的指示灯(黄色方框): 考虑到在照亮场景的光线之上,它还实现了FOV,该FOV将遮挡视场之外的任何物体。这就是为什么阴影的左侧部分看起
我是不熟悉Gradle并尝试编译我的项目的新手,但是也“阴影化”(就像在maven中一样)本地jar文件。 我正在尝试使用gradle shadow插件,但是当我运行“shadowJar”时,它并没有
用 JavaScript 编写解析器,对于任何语言,显然都使用 Map 来存储名称到变量的映射。 大多数语言允许以某种方式或内部作用域中的另一个变量遮蔽外部作用域中的变量。实现这一点的理想数据结构是功
// Shadowing #include using namespace std; const int MNAME = 30; const int M = 13; class Pers
我想设置我的导航栏和状态栏,就像下面链接中图片中的示例一样。我怎么能这样做 see the example 最佳答案 您可以通过像这样设置样式属性来简单地做到这一点: se
我以为我理解阴影的概念。但是这段代码让我想知道: public class Counter { int count = 0; public void inc() { count++; } pu
尝试遵循概述的方法 here为我的 UINavigationController 添加阴影。但是,该方法似乎不起作用。 这是我使用的代码: - (void)viewDidLoad { [sup
如何给 UITableViewCell 上下两边添加阴影? 我试过这个: cell.layer.shadowOpacity = 0.75f; cell.layer.shadowRadius = 5.0
我有一个博客,我为它制作了自定义光标,但它们并不是我想要的样子。使用一些免费的光标编辑程序制作光标,它们看起来只有一种颜色,没有边框、黑色或阴影。即使以图片形式上传后,在线.png 文件看起来也没有阴
我能得到像这张附图那样的带阴影的饼图吗? 如果是,怎么办? 这是饼图的代码: 最佳答案 遗憾的是,Kendo UI 饼图不支持任何 3D 元素。您可以在 Telerik 论坛中阅读相关信息 he
我一直试图获得给定的 curl 阴影效果 here对于 box-shadow:inset 但没有得到任何东西。任何onw有任何线索我可以让它工作吗? 一直试图让它在这个 上工作jsfiddle 将其更
我正在构建一个类似商店的东西,所以我有产品,侧面有圆形按钮,当我点击它们时,它会改变产品的颜色。一切都很完美,但我希望当我单击按钮时,按钮保持高亮状态。代码: CSS: #but1 { posi
我想创建一个底部边框下方有框显示的 H2 这是我的“基本”代码: My H2 #toto{ box-shadow: 0 4px 2px -2px gray; } 但我想
我有一个包含卡片列表的模板: --> {{event.eventTitle}} {{event.eve
CSS 阴影有问题。我不知道如何摆脱这里的顶部阴影:http://i.imgur.com/5FX62Fx.png 我得到的: box-shadow: 0 -3px 4px -6px #777, 0 3
在我的应用程序中,我想保留状态栏但使其背景与主屏幕相同。 所以我创建了一个自定义主题来设置应用程序背景: @drawable/background_shelf true
滚动 ListView 时如何去除阴影。 我在列表的顶部和底部出现了阴影。 最佳答案 关于android ListView 阴影,我们在Stack Overflow上找到一个类似的问题: https
我想在我的 Swift 4 中使用 MaterialComponents 为我的 View 添加阴影,但我不明白如何使用阴影电梯。我创建了一个名为 ShadowedView 的类,类似于 docume
给定以下 CAShapeLayer 是否可以在提示处添加如下图所示的阴影? 我正在使用 UIBezierPath 来绘制条形图。 - (CAShapeLayer *)gaugeCircleLayer
我是一名优秀的程序员,十分优秀!