更改图像的特定区域并填充该区域的颜色 [英] change particular area of an image and fill color in that area

问题描述

编辑Png图像E.g更改特定区域并填充该区域的颜色。

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.

之后他可以保存该图像它有可能吗？像Color公司的网站使用这种东西。

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

如下面的URL https://www.sherwin-williams.com/visualizer#/active

推荐答案

演示：

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

代码： https://stackblitz.com/edit/angularjs-rj88cu

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

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

下载时，

1. 背景图片在画布上绘制


2. SVG（不含< image> ）正在转换ed to dataUrl然后在画布上绘制


3. Canvas转换为dataUrl进行下载

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

为什么首先没有使用canvas而不是svg？

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

因为鼠标交互很难在画布中实现，并且在内联svg中更容易像DOM元素那样工作（悬停伪类，点击事件等）

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)

另外我假设你想要angularjs，因为你已经标记了它（即使你没有在问题中提到）

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

此外，代码中还有很多不良做法，例如编辑器不是组件和样式输入[type = color] ' s Shadow DOM（你可以使用一些colorpicker插件）

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：告诉我是否需要更改某些内容

PS: Tell me if something needs to be changed

这篇关于更改图像的特定区域并填充该区域的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！