精华内容
下载资源
问答
  • 有一个一维整型数组int[] data,保存的是一张宽为w,高为h的图片像素数据,请写一个函数,将该图片所有的alpha(透明度)调整为原来的一半,函数定义:void doAlphaHalf(int[] data, int w, int h)。
  • 主要介绍了Canvas 像素处理之改变透明度的实现代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 本文介绍透明度叠加算法(Alpha Blending Algorithm),并用 C#/WPF 的代码,以及像素着色器的代码 HLSL 来实现它。 本文内容算法在 C# 代码中实现在像素着色器中实现 算法 对于算法,我只是搬运工,可以随意搜索到...

    本文介绍透明度叠加算法(Alpha Blending Algorithm),并用 C#/WPF 的代码,以及像素着色器的代码 HLSL 来实现它。


    算法

    对于算法,我只是搬运工,可以随意搜索到。算法详情请查看:Alpha compositing - Wikipedia

    对于完全不透明的背景和带有透明度的前景,合并算法为:

    float r = (foreground.r * alpha) + (background.r * (1.0 - alpha));
    

    这是红色。然后绿色 g 和蓝色 b 通道进行一样的计算。最终合成图像的透明通道始终设置为 1。

    在 C# 代码中实现

    多数 UI 框架对于颜色值的处理都是用一个 byte 赛表单个通道的一个像素。于是计算会采用 0xff 即 255。

    for (int i = 0; i + 4 < length; i = i + 4)
    {
        var backB = background[i];
        var backG = background[i + 1];
        var backR = background[i + 2];
        var foreB = foreground[i];
        var foreG = foreground[i + 1];
        var foreR = foreground[i + 2];
        double alpha = foreground[i + 3];
    
        blue = 0;
    
        output[i] = (foreB * alpha) + (backB * (1.0 - alpha));
        output[i + 1] = (foreG * alpha) + (backG * (1.0 - alpha));
        output[i + 2] = (foreR * alpha) + (backR * (1.0 - alpha));
        output[i + 3] = 1.0;
    }
    

    这段代码当然是跑不起来的,因为是下面两篇博客的魔改代码。你需要阅读以下两篇博客了解如何在 WPF 中按像素修改图像,然后应用上面的透明度叠加代码。

    话说,一般 UI 框架都自带有透明度叠加,为什么还要自己写一份呢?

    当然是因为某些场景下我们无法使用到 UI 框架的透明度叠加特性的时候。例如使用 HLSL 编写像素着色器的一个实现。

    下面使用像素着色器的实现是我曾经写过的一个特效的一个小部分,我把透明度叠加的部分单独摘取出来。

    在像素着色器中实现

    以下是 HLSL 代码的实现。Background 是从采样寄存器 0 取到的颜色采样,Foreground 是从采样寄存器 1 取到的颜色采样。

    这里的计算中,背景是不带透明度的,而前景是带有透明度的。

    /// <description>透明度叠加效果。</description>
    
    sampler2D Background : register(s0);
    sampler2D Foreground : register(s1);
    
    float4 main(float2 uv : TEXCOORD) : COlOR
    {
        float4 background = tex2D(Background, uv);
        float4 foreground = tex2D(Foreground, uv);
        float alpha = foreground.a;
    
        float r = (foreground.r * alpha) + (background.r * (1.0 - alpha));
        float g = (foreground.g * alpha) + (background.g * (1.0 - alpha));
        float b = (foreground.b * alpha) + (background.b * (1.0 - alpha));
        float a = 1.0;
        
        return float4(r, g, b, a);
    }
    

    叠加了一个带有透明度的图片

    如果要测试的图片都是不带透明度的,那么可以通过自己设一个透明度来模拟,传入透明度值 Alpha。

    /// <description>透明度叠加效果。</description>
    
    /// <type>Double</type>
    /// <summary>采样 2 的叠加透明度。</summary>
    /// <minValue>0.0</minValue>
    /// <maxValue>1.0</maxValue>
    /// <defaultValue>0.75</defaultValue>
    float Alpha : register(C0);
    
    sampler2D Background : register(s0);
    sampler2D Foreground : register(s1);
    
    float4 main(float2 uv : TEXCOORD) : COlOR
    {
        float4 background = tex2D(Background, uv);
        float4 foreground = tex2D(Foreground, uv);
        float alpha = Alpha;
    
        float r = (foreground.r * alpha) + (background.r * (1.0 - alpha));
        float g = (foreground.g * alpha) + (background.g * (1.0 - alpha));
        float b = (foreground.b * alpha) + (background.b * (1.0 - alpha));
        float a = 1.0;
        
        return float4(r, g, b, a);
    }
    

    为第二张采样设定透明度


    参考资料


    我的博客会首发于 https://blog.walterlv.com/,而 CSDN 会从其中精选发布,但是一旦发布了就很少更新。

    如果在博客看到有任何不懂的内容,欢迎交流。我搭建了 dotnet 职业技术学院 欢迎大家加入。

    知识共享许可协议

    本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布,但务必保留文章署名吕毅(包含链接:https://walterlv.blog.csdn.net/),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系

    展开全文
  • Canvas 像素处理之改变透明度

    千次阅读 2017-04-12 10:54:53
    getImageData()方法返回 ImageData 对象,该对象拷贝了画布指定矩形的像素数据。 注意:ImageData对象不是图像,它规定了画布上一个部分(矩形),并保存了该矩形内每个像素的信息。 对于ImageData对象中的每个...
    一 定义和用法
    getImageData()方法返回 ImageData 对象,该对象拷贝了画布指定矩形的像素数据。
    注意:ImageData对象不是图像,它规定了画布上一个部分(矩形),并保存了该矩形内每个像素的信息。
    对于ImageData对象中的每个像素,都存在着四方面的信息,即RGBA值:
    R - 红色(0-255)
    G - 绿色(0-255)
    B - 蓝色(0-255)
    A - alpha 通道(0-255; 0 是透明的,255 是完全可见的)
    color/alpha 信息以数组形式存在,并存储于 ImageData 对象的 data 属性中。
    提示:在操作完成数组中的 color/alpha 信息之后,您可以使用 putImageData() 方法将图像数据拷贝回画布上。
     
    二 代码
    <!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    	<title> 改变透明度 </title>
    </head>
    <body>
    <h2> 改变透明度 </h2>
    <canvas id="mc" width="600" height="460"
    	style="border:1px solid black"></canvas>
    <script type="text/javascript">
    	// 获取canvas元素对应的DOM对象
    	var canvas = document.getElementById('mc');
    	// 获取在canvas上绘图的CanvasRenderingContext2D对象
    	var ctx = canvas.getContext('2d');
    	var image = new Image();
    	image.src = "test.png";
    	image.onload = function()
    	{
    		// 用带透明度参数的方法绘制图片
    		drawImage(image , 124  , 20 , 0.4);
    	}
    	var drawImage = function(image , x  , y , alpha)
    	{
    		// 绘制图片
    		ctx.drawImage(image , x , y);
    		// 获取从x、y开始,宽为image.width、高为image.height的图片数据
    		// 也就是获取绘制的图片数据
    		var imgData = ctx.getImageData(x , y , image.width , image.height);
    		for (var i = 0 , len = imgData.data.length ; i < len ; i += 4 )
    		{
    			// 改变每个像素的透明度
    			imgData.data[i + 3] = imgData.data[i + 3] * alpha;
    		}
    		// 将获取的图片数据放回去。
    		ctx.putImageData(imgData , x , y);
    	}
    </script>
    </body>
    </html>
     
    三 运行结果

     
    • 0e1e37f9-6aeb-3341-80ca-4a2315436dd2-thumb.png
    • 大小: 14.5 KB
    展开全文
  • 这是河流数据,理想情况下,这里代表的每个像素为0将是完全透明的。 对此做了一些研究,似乎我可以将我的数据转换成RGBA数组,并将alpha值设置为仅使不需要的单元格透明。然而,河流数组中的值是浮动的,不能被转换...

    我试图用matplotlib来绘制一些我正在研究的文件的数字。我有二组数据在二维数组:一个ascii山体阴影栅格,我可以很高兴地绘制和调整使用:

    import matplotlib.pyplot as pp

    import numpy as np

    hillshade = np.genfromtxt('hs.asc', delimiter=' ', skip_header=6)[:,:-1]

    pp.imshow(hillshade, vmin=0, vmax=255)

    pp.gray()

    pp.show()

    这使:

    还有一个第二个ascii光栅,描绘了横跨风景的河流的属性。该数据可以以与上述相同的方式绘制,但是不对应于河网的阵列中的值被指定为-9999的无数据值。目的是使无数据值设置为透明,以便河流值覆盖山体阴影。

    这是河流数据,理想情况下,这里代表的每个像素为0将是完全透明的。

    对此做了一些研究,似乎我可以将我的数据转换成RGBA数组,并将alpha值设置为仅使不需要的单元格透明。然而,河流数组中的值是浮动的,不能被转换(因为原始值是图的整个点),我相信如果使用RGBA格式,imshow函数只能取无符号整数。

    有没有办法解决这个限制?我曾经希望我可以用像素值和alpha值创建一个元组,并将它们绘制成这样,但这似乎不可能。

    我也和PIL一起玩,试图创建一个没有数据值透明的河流数据的PNG文件,但这似乎自动将像素值缩放到0-255,从而失去了我需要保留的值。

    我欢迎任何人对这个问题的任何见解。

    展开全文
  • /** * @param $picture 图片数据流 比如file_get_contents(imageurl)返回的东东 * @param $destfile 存储路径 */ function miniImg($picture,$destfile) { //获取源图gd图像标识符 $srcImg =...
        /**
         * @param  $picture 图片数据流 比如file_get_contents(imageurl)返回的东东
         * @param $destfile 存储路径
         */    
        function miniImg($picture,$destfile)
        {
            //获取源图gd图像标识符
            $srcImg = imagecreatefromstring($picture);
            $srcWidth = imagesx($srcImg);
            $srcHeight = imagesy($srcImg);
            //创建新图
            $newWidth = round($srcWidth / 2);
            $newHeight = round($srcHeight / 2);
            $newImg = imagecreatetruecolor($newWidth, $newHeight);
            //分配颜色 + alpha,将颜色填充到新图上
            $alpha = imagecolorallocatealpha($newImg, 0, 0, 0, 127);
            imagefill($newImg, 0, 0, $alpha);
            
            //将源图拷贝到新图上,并设置在保存 PNG 图像时保存完整的 alpha 通道信息
            imagecopyresampled($newImg, $srcImg, 0, 0, 0, 0, $newWidth, $newHeight, $srcWidth, $srcHeight);
            imagesavealpha($newImg, true);
            imagepng($newImg,$destfile);
        }

    展开全文
  • 如果您将图像作为资源包含在内,最简单的方法就是在像gimp这样的程序中自己编辑图像.您可以在那里添加背景,并确保它的外观如何并且没有用处处理能力每次加载时修改图像.如果您自己无法控制图像,可以通过执行类似的...
  • 一张图片,可以通过getPixels()将所有的...最高8位为透明度信息.所以如果想要修改该透明度就只修改这8为的信息即可. int[] array; int x, y; array[x+y*width]=0. 则此像素点位完全透明. 如果是要获得或者...
  • // CCClippingNode 在渲染child时 仅渲染模板透明度值 大于 透明度 阀值的 像素点 默认 透明度 阀值 =1   CCNode* m_pStencil; //模板 简单的模板可以用 CCDrawNode 、 CCLayerColor 来做 。 复杂的...
  • 透明度测试

    2021-02-25 21:33:49
    透明度测试: 只要一个片元的透明度不满足条件(小于某个阈值),它对应的片元就会被舍弃。 被舍弃的片元不会再进行任何处理,也不会对颜色缓冲产生影响。 否则,就会按照普通的不透明物体处理方式来处理它。 使用...
  • 最近有个需求需要实现2张图融合渐变过程显示(作业还没交,先发文记录下~~) 原图如下: 效果图如下(依次是渐变过程截图,整过过程图显示在一个JPanel中):
  • unity3D之Transparency我们讲到在Shader的#pragma声明中添加alpha参数来...这种类型的透明效果使用一个变量来简单地控制哪些像素不要画在屏幕上。因此,cutofftransparency使得我们可以得到要么全透明效果,要么不...
  • 【深度缓冲区】:用于记录颜色缓冲区中每个像素的深度值,通过深度缓冲区,我们可以通过深度测试来确定像素的遮挡关系 【模版缓冲区】:与深度缓冲类似,但这个值是可以自己设定的。,通过设置每个像素的模板缓冲值,...
  • CSS3中的很多都可以类比与我们canvas的一些属性 canvas中“画笔”环境对象的很多属性都可以类比CSS3中的属性 我们不仅仅可以绘制图形,还可以向画布中添加文字文字填充同样先获取元素对象与环境对象...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,584
精华内容 633
关键字:

像素透明度