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

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

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

在那之后，他也可以保存那张照片，有可能吗？？喜欢颜色的公司网站用这种东西

---

如下面URL所示，示例中的函数是定制产品，它是通过AngularJS实现的

如果您想做类似的事情，可以将几个jQuery插件和HTML5特性结合起来

你需要的东西：

• 一些jQuery颜色选择器-用于选择颜色
• HTML5画布-用于显示边框和用颜色填充图像区域
• Canvas2图像-保存图像

如果你想用一些现成的，就找一些吧

---

jquery colorize image插件。

编辑：可以从画布获取图像数据并更改其像素。您也可以搜索用于绘制线、圆等的算法，但ideia仍然是相同的（获取画布图像，编辑它，然后保存它）

由于使用的是AngularJS，因此可以创建一个指令，将颜色作为输入，并在图像的特定区域打印该颜色。然后可以使用

canvas.toDataURL（）

或

canvas2image（）

方法将画布解析为所需格式的图像

在此处检查此方法的MDN文档

我制作了一个小代码片段，只是想给大家一个想法。我认为，颜色选择器功能是一个步骤，您可以轻松地实现它，并将其作为输入提供给canvas指令。我希望这有帮助

函数hexToRgb（颜色）{
var shorthandRegex=/^#？（[a-f\d]）（[a-f\d]）（[a-f\d]）$/i；
颜色=颜色。替换（shorthandRegex，函数（m、r、g、b）{
返回r+r+g+g+b+b；
});
var result=/^#？（[a-f\d]{2}）（[a-f\d]{2}）（[a-f\d]{2}）$/i.exec（颜色）；
返回结果{
r:parseInt（结果[1]，16），
g:parseInt（结果[2]，16），
b:parseInt（结果[3]，16）
} : {
r:0，
g:0，
b:0
};
}
函数colorImage（imgId，六色）{
//创建隐藏画布（使用图像尺寸）
var imgElement=document.getElementById（imgId）；
var canvas=document.createElement（“canvas”）；
canvas.width=imgElement.width；
canvas.height=imgElement.height；
var ctx=canvas.getContext（“2d”）；
ctx.drawImage（imgElement，0,0）；
var imageData=ctx.getImageData（0,0，canvas.width，canvas.height）；
var数据=imageData.data；
//将图像转换为灰度
var rgbColor=hexToRgb（hextocolor）；
//console.log（rgbColor）；
对于（var p=0，len=data.length；p
img.color-img{
位置：绝对位置；
}

顶色：
选择
红色
绿色
蓝色
黄色的
底色：
选择
红色
绿色
蓝色
黄色的



只需将此函数复制并粘贴到自定义助手文件或您的类中即可。
您只需设置参数即可获得正确的图像分辨率结果

  function resize($source_image, $destination, $tn_w, $tn_h, $quality = 100, $wmsource = false) {
        $info = getimagesize($source_image);
        $imgtype = image_type_to_mime_type($info[2]);

        #assuming the mime type is correct
        switch ($imgtype) {
            case 'image/jpeg':
            $source = imagecreatefromjpeg($source_image);
            break;
            case 'image/jpg':
            $source = imagecreatefromjpeg($source_image);
            break;
            case 'image/gif':
            $source = imagecreatefromgif($source_image);
            break;
            case 'image/png':
            $source = imagecreatefrompng($source_image);
            break;
            default:
            die('Invalid image type.');
        }
        #Figure out the dimensions of the image and the dimensions of the desired thumbnail
        $src_w = imagesx($source);
        $src_h = imagesy($source);


        #Do some math to figure out which way we'll need to crop the image
        #to get it proportional to the new size, then crop or adjust as needed

        $x_ratio = $tn_w / $src_w;
        $y_ratio = $tn_h / $src_h;

        if (($src_w <= $tn_w) && ($src_h <= $tn_h)) {
            $new_w = $src_w;
            $new_h = $src_h;         
        } elseif (($x_ratio * $src_h) < $tn_h) {
            $new_h = ceil($x_ratio * $src_h);
            $new_w = $tn_w;
        } else {
            $new_w = ceil($y_ratio * $src_w);
            $new_h = $tn_h;
        }

        $newpic = imagecreatetruecolor(round($new_w), round($new_h));
        imagecopyresampled($newpic, $source, 0, 0, 0, 0, $new_w, $new_h, $src_w, $src_h);
        $final = imagecreatetruecolor($tn_w, $tn_h);
        $backgroundColor = imagecolorallocate($final, 248,248,248);
        imagefill($final, 0, 0, $backgroundColor);
        //imagecopyresampled($final, $newpic, 0, 0, ($x_mid - ($tn_w / 2)), ($y_mid - ($tn_h / 2)), $tn_w, $tn_h, $tn_w, $tn_h);
        imagecopy($final, $newpic, (($tn_w - $new_w)/ 2), (($tn_h - $new_h) / 2), 0, 0, $new_w, $new_h);
        

        #if we need to add a watermark
        if ($wmsource) {
            #find out what type of image the watermark is
            $info    = getimagesize($wmsource);
            $imgtype = image_type_to_mime_type($info[2]);

            #assuming the mime type is correct
            switch ($imgtype) {
                case 'image/jpeg':
                $watermark = imagecreatefromjpeg($wmsource);
                break;
                case 'image/gif':
                $watermark = imagecreatefromgif($wmsource);
                break;
                case 'image/png':
                $watermark = imagecreatefrompng($wmsource);
                break;
                default:
                die('Invalid watermark type.');
            }

            #if we're adding a watermark, figure out the size of the watermark
            #and then place the watermark image on the bottom right of the image
            $wm_w = imagesx($watermark);
            $wm_h = imagesy($watermark);
            imagecopy($final, $watermark, $tn_w - $wm_w, $tn_h - $wm_h, 0, 0, $tn_w, $tn_h);

        }
        if (imagejpeg($final, $destination, $quality)) {
            return true;
        }
        return false;
    }

函数调整大小（$source\u image，$destination，$tn\u w，$tn\u h，$quality=100，$wmsource=false）{
$info=getimagesize（$source\u image）；
$imgtype=image_type_to_mime_type（$info[2]）；
#假设mime类型正确
交换机（$imgtype）{
案例“图像/jpeg”：
$source=imagecreatefromjpeg（$source\u image）；
打破
案例“image/jpg”：
$source=imagecreatefromjpeg（$source\u image）；
打破
案例“image/gif”：
$source=imagecreatefromformgif（$source\u image）；
打破
案例“image/png”：
$source=imagecreatefrompng（$source\u image）；
打破
违约：
die（'无效图像类型'）；
}
#计算图像的尺寸和所需缩略图的尺寸
$src_w=imagesx（$source）；
$src_h=imagesy（$source）；
#做一些数学运算，找出我们需要裁剪图像的方式
#要使其与新尺寸成比例，请根据需要进行裁剪或调整
$x_比率=$tn_w/$src_w；
$y_比率=$tn_h/$src_h；
如果（$src_w演示：
全文：

代码：

说明：
编辑器是一个svg，包含背景图像
和区域
，两者都是从
编辑器.imageUrl
和
编辑器.areas

下载:

背景图像绘制在画布上
SVG（不带
）转换为dataUrl，然后在画布上绘制
画布转换为dataUrl以供下载
为什么最初不使用canvas代替svg

因为鼠标交互很难在画布中实现，在内联svg中更容易实现，就像DOM元素一样（悬停伪类、单击事件等）

我还假设您想要angularjs，因为您已经标记了它（尽管