Javascript 通过PHP/JS更改PNG图像颜色

是否可以通过php/js函数更改png图像的图像颜色

我只想改变非透明区域的颜色。此处提供了一个示例图像：

---

我只想更改可见t恤的颜色，而不是所有区域的颜色。

您可以使用PHP imagick库。我认为这是最好的办法

例如：

<?php

$imageInPath = __DIR__. '\\image-before.png';
$imageOutPath = __DIR__. '\\image-after.png';

$overlayColor = '#F00'; // Red for example
$fuzz = 0;

$overlay = new Imagick( $imageInPath ); // Create imagick object
$overlay->opaquePaintImage ( $overlay->getImagePixelColor(0, 0) , $overlayColor , $fuzz , true ); // Fill the opaque area

$image = new Imagick($imageInPath); // Create imagick object
$image->compositeImage($overlay, Imagick::COMPOSITE_DARKEN  , 0, 0); // Compose the original image with the overlay
$image->writeImage( $imageOutPath ); // Save the image to the given path

?>

此代码段假定第一个像素（x=0，y=0）是透明的

您可以通过使用另一个合成常数来更改在图片上应用覆盖的方式。您可以在此处获得imagick常量的完整列表：

---

别忘了安装Imagick库，并在php.ini文件中启用它以使其正常工作。

ImageMagick可能是一个很好的选择（签出，然后），因为它将在服务器上执行操作，并且“理论上”无论如何都可以工作（例如，即使客户端的JS已关闭）

如果您无法使用它（例如，您的主机有限），通过JavaScript的一个选项是使用屏幕外画布，将图像绘制到画布上，从画布生成PNG，然后最终将其添加到页面

下面是一些工作代码的示例：

// shirtPath: the url to the shirt // overlayPath: the url to the overlay image // callback: a callback that is given the image once it's generated function generateShirtOverlay(shirtPath,overlayPath,callback) { // load the images var loadedImages = 0; function imageLoaded() { loadedImages++; if(loadedImages == 2) { composeImages(); } } var shirtImage = new Image(), overlayImage = new Image(); // set the image onload callbacks shirtImage.onload = imageLoaded; overlayImage.onload = imageLoaded; // load the images shirtImage.src = shirtPath; overlayImage.src = overlayPath; var generatedImage = new Image(); function composeImages() { // get image sizes var width = shirtImage.width, height = shirtImage.height, overlayWidth = overlayImage.width, overlayHeight = overlayImage.height; // create a canvas var canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; // draw the shirt to it var context = canvas.getContext("2d"); context.drawImage(shirtImage,0,0); // set the global composite operator to multiply // this overlays the image nicely, keeping the // dark areas on the shirt dark context.globalCompositeOperation = "multiply"; // draw the overlay image, centering it if it's // not the same size context.drawImage(overlayImage, (width - overlayWidth) / 2, (height - overlayHeight) / 2 ); // a bit of masking magic! for details, see: // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation context.globalCompositeOperation = "destination-in"; // draw the shirt again; this clips the overlay image // at the shirt's edges context.drawImage(shirtImage,0,0); // finally, extract a PNG from the canvas var png = canvas.toDataURL("image/png"); generatedImage.onload = returnComposedImage(); // and load it to an image object generatedImage.src = png; } function returnComposedImage() { if(typeof callback == "function") callback(generatedImage); } } //衬衫路径：衬衫的url //覆盖路径：覆盖图像的url //回调：一个回调，一旦图像生成，它就会被赋予 函数generateShirtOverlay（shirtPath、OverlyPath、回调）{ //加载图像 var loadedImages=0； 函数imageLoaded（）{ LoadeImage++； 如果（LoadeImage==2）{ 合成图像（）； } } var shirtImage=新图像（）， 覆盖图像=新图像（）； //设置映像onload回调 shirtImage.onload=图像加载； overlayImage.onload=图像加载； //加载图像 shirtImage.src=shirtPath； overlayImage.src=overlayPath； var generateImage=新图像（）； 函数composeImages（）{ //获取图像大小 变量宽度=shirtImage.width， 高度=shirtImage.height， overlayWidth=overlayImage.width， 重叠高度=重叠图像高度； //创建画布 var canvas=document.createElement（“canvas”）； 画布宽度=宽度； canvas.height=高度； //把衬衫拉过来 var context=canvas.getContext（“2d”）； drawImage（shirtImage，0,0）； //将全局复合运算符设置为乘法 //这样可以很好地覆盖图像，保持 //衬衫上的深色区域为深色 context.globalCompositeOperation=“乘法”； //绘制覆盖图像，如果它是 //大小不一样 上下文。drawImage（覆盖图像， （宽度-覆盖宽度）/2， （高度-超高）/2 ); //一点掩蔽魔法！有关详细信息，请参阅： // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation context.globalCompositeOperation=“中的目标”； //再次绘制衬衫；这将剪辑覆盖图像 //在衬衫边上 drawImage（shirtImage，0,0）； //最后，从画布中提取PNG var png=canvas.toDataURL（“image/png”）； generatedImage.onload=returnComposedImage（）； //并将其加载到图像对象 generateImage.src=png； } 函数returnComposedImage（）{ if（回调类型==“函数”） 回调（生成图像）； } } 可以调用此函数来生成图像。最终，它将调用回调，提供生成的图像。然后，由于它是图像对象，您可以将其直接添加到页面中，例如：

function addImageToPage(image) { document.body.appendChild(image); } generateShirtOverlay("images/shirt.png", "images/design1.png", addImageToPage); 函数AddImagePage（图像）{ document.body.appendChild（图像）； } generateShirtOverlay（“images/shirt.png”、“images/design1.png”、addImageToPage）；

---

但是请注意，客户端呈现的缺点是并非所有浏览器都支持所有这些画布功能。此外，客户端的开销稍微大一些。幸运的是，由于它不是一个非常复杂的操作，该方法只使用图像混合模式，不需要迭代像素。

请发布实际的透明PNG输入文件。作为替代，在ImageMagick命令行中，我认为应该可以将白色着色为天蓝色

convert image.png \
\( -clone 0 -alpha off -fill skyblue -colorize 100 \) \
\( -clone 0 -alpha extract \) \
-compose multiply -composite \
result.png

---

我对PHP Imagick不太了解。因此，我将把我的答案留给别人翻译成Imagick。

您可以将

放置在图像顶部，并为其背景上色。您还可以使用

绘图，或使用PHP图像命令动态创建图像。底线是，你们在这里发布得太早了。我在画布构图中使用了这个图像。我不想更改渐变区域的背景，只想更改图像的可见部分。如何通过PHP实现这一点？我想我必须计算出透明区域在哪里可见，然后用颜色填充所有不透明的东西。您能告诉我哪些PHP方法可用于此操作吗？要对不透明像素着色，可以使用

上下文的

imageData

对象。数据是一个巨大的数组，每组四个值代表一个像素的R、G、B和a通道。使用A通道确定不透明性，然后根据颜色更改RGB。再说一次，“我怎么做X？”网站也不是这样。你应该做研究，实施一个解决方案，然后当你真的、真的陷入困境时问一个问题。请发布实际的透明png，而不是一个带有棋盘格图案的png。@fmw42谢谢你的回答。这是一个透明的png：可以只改变展示的T恤的颜色？你能提供理由说明为什么你认为Imagick类是最好的方法吗？也许可以举一个小例子来说明你将如何实现OP寻求的建议？谢谢我刚刚加了一个