实现这种图像效果的最佳方法是啥?使用 PHP GD 或 JS Canvas?
Posted
技术标签:
【中文标题】实现这种图像效果的最佳方法是啥?使用 PHP GD 或 JS Canvas?【英文标题】:Best way to achieve this image effect? Use PHP GD or JS Canvas?实现这种图像效果的最佳方法是什么?使用 PHP GD 或 JS Canvas? 【发布时间】:2012-01-21 20:05:33 【问题描述】:我正在尝试重现这种效果(皇冠):
用户上传图像的地方,它会将暗像素变为黑色,将亮像素变为清晰。这是一个好方法吗?
我也在 SO:How do you convert an image to black and white in php
上发现了这个但我不确定如何实现它。
人们会为此推荐 JS Canvas 还是 PHP 的 GD?
我不会每次都一遍又一遍地创建图像,我会对其进行处理并将其移动到一个目录以供将来使用
【问题讨论】:
哥们,你能把这张图片缩小一点吗?红色背景让我的浏览器和眼睛都崩溃了。 这是针对任意图像还是特别针对此图像? @ktash 适用于任何图像。我知道它可能在某些图像上效果更好...... 【参考方案1】:下面是如何在 JS 中做到这一点。请注意,图像必须来自同一域才能正常工作:
var img = document.getElementById( 'imagebase' );
var canvas = document.getElementById( 'canvasEl' );
// Set Canvas widht and height
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext( '2d' );
ctx.drawImage( img, 0, 0, canvas.width, canvas.height );
// The loop
for ( var x = 0, l = canvas.width; x < l; x++ )
for ( var y = 0, lh = canvas.height; y < lh; y++ )
// Returns array [Red, Green, Blue, Alpha] each out of 255
var data = ctx.getImageData(x,y,1,1);
// Thresholding: More black than white, and more transparent than not
if ( ( data[0]+data[1]+data[2] ) / 3 < ( 255 / 2 ) && data[3] > 255 / 2 )
// Set to black with full opacity
data[0] = 0, data[1] = 0, data[2] = 0, data[3] = 255;
else
// Set to transparent
data[3] = 0;
ctx.putImageData( data, x, y );
我使用虚拟 ID 向您展示了工作原理。另外,请查看this page 了解有关像素操作的更多信息。
也就是说,这需要画布才能工作,因此旧版 IE 不支持它(除非您使用 Google 的替换画布,但我不确定它是否支持所有这些方法)。好处是它把负担放在了每个用户身上,而不是所有用户的服务器上。
【讨论】:
【参考方案2】:我建议您使用raphaeljs 进行绘图,对于像皇冠这样的对象,您可以绘制它们,也可以使用图像。使用它制作 2bit 图像也会更容易!
【讨论】:
以上是关于实现这种图像效果的最佳方法是啥?使用 PHP GD 或 JS Canvas?的主要内容,如果未能解决你的问题,请参考以下文章