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

发布于 2024-12-28 01:24:34 字数 387 浏览 3 评论 0原文

我正在尝试重新创建这种效果（皇冠）：

在此处输入图像描述

用户上传图像的位置暗像素为黑色，亮像素为透明。这是一个好方法吗？

我还发现了这一点：如何你用 PHP 将图像转换为黑白

但我不太确定如何实现它。

人们会为此推荐 JS Canvas 还是 PHP 的 GD？

我不会每次都一遍又一遍地创建图像，我会处理它并将其移动到目录以供将来使用

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谎言 2025-01-04 01:24:34

下面是在 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 来向您展示事情是如何工作的。另外，请查看此页面，了解有关像素操作的更多信息。

也就是说，这需要画布才能工作，因此旧版 IE 不支持它（除非您使用 Google 的替换画布，但我不确定它是否支持所有这些方法）。优点是它把负担放在每个用户身上，而不是所有用户的服务器上。

The following is how to do it in JS. Note that the image must be from the same domain to work properly:

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 );
    }
}

I've used dummy ID's to show you how things work. Also, check out this page for more information about pixel manipulation.

That said, this requires canvas to work so it won't be supported in older IE (unless you use Google's replacement canvas, but I'm not sure about its support for all of these methods). The advantage is that it puts the burden on each user instead of on your server for all users.

回复收藏 0 原文