更改图像的特定区域并在该区域填充颜色

编辑 Png 图像，例如更改特定区域并在该区域填充颜色.

我想更改图像仅选定区域的颜色.就像第一个用户选择了一种颜色，然后他选择了一个图像，然后他可以用所选颜色更改图像的特定区域.

之后他也可以保存那个图像.有可能吗??像Color公司的网站就用这种东西.

如下网址 https://www.sherwin-williams.com/visualizer#/active

解决方案

演示:

整页:https://angularjs-rj88cu.stackblitz.io/

代码:https://stackblitz.com/edit/angularjs-rj88cup>

解释:

编辑器是一个 svg，包含背景图像为 <image> 和区域为 <path> 两者都是从 editor.imageUrl 和 editor.areas

用于下载，

1. 在画布上绘制背景图片
2. SVG(不带<image>)转换为dataUrl，然后在canvas上绘制
3. Canvas 转换为 dataUrl 供下载

为什么一开始不使用 canvas 而不是 svg?

因为鼠标交互很难在画布中实现，而在内联 svg 中更容易像 DOM 元素(悬停伪类、点击事件等)这样的工作

我还假设你想要 angularjs，因为你已经标记了它(即使你没有在问题中提到)

代码中也有很多不好的做法，比如编辑器不是一个组件和样式input[type=color]的Shadow DOM(你可以使用一些颜色选择器插件)

PS:如果需要更改，请告诉我

Edit Png Image For E.g change particular area and fill color in that area.

I want to change the color of an image only selected area. Like the first user selects a color then he chooses an image after that he can change the particular area of image color with the selected color.

After that he can save that image too Is it possible?? like Color company website uses this kind of thing.

like below URL https://www.sherwin-williams.com/visualizer#/active

解决方案

Demo:

Full page: https://angularjs-rj88cu.stackblitz.io/

Code: https://stackblitz.com/edit/angularjs-rj88cu

Explanation:

The editor is an svg containing background image as <image> and areas as <path> both are created from editor.imageUrl and editor.areas

For downloading,

1. Background image is drawn on a canvas
2. SVG (without <image>) is converted to dataUrl and then drawn on canvas
3. Canvas is converted to dataUrl for downloading

Why canvas was not used instead of svg in the first place?

Because mouse interaction are difficult to implement in canvas and is much easier in inline svg as the work like DOM elements (hover pseudo class, click events, etc)

Also I assumed you wanted angularjs because you have tagged it (even though you have not mentioned in the question)

Also there are a lot of bad practices in the code like editor not being a component and styling input[type=color]'s Shadow DOM (you can use some colorpicker plugin instead)

PS: Tell me if something needs to be changed