网页中的JS效果是啥？

Posted 2023-05-11

参考技术A 网页页面的交互效果。
html负责结构，网页想要表达的主体由html书写；JS负责交互，用户和网页产生的互动由它来控制。

实现这种图像效果的最佳方法是啥？使用 PHP GD 或 JS Canvas？

【中文标题】实现这种图像效果的最佳方法是啥？使用 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 图像也会更容易！