实现这种图像效果的最佳方法是啥?使用 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?的主要内容,如果未能解决你的问题,请参考以下文章

PHP GD 库中使用的默认字体的名称是啥?

在php中重命名文件夹中所有图像的最佳方法是啥?

PHP 将 GD 图像转换为用于验证码的 CSS 代码

在 CMS 中管理砌体网格图像的最佳方法是啥?

PHP使用GD库实现 图像生成缩放logo水印和简单验证码

如何使用 PHP 和 GD 获取图像资源大小(以字节为单位)?