html去除透明部分像素,javascript – putImageData(),如果新像素是透明的,如何保留旧像素？...

一时失言乱红尘 2022-10-10 11:19 6阅读 0赞

您可以使用getImageData创建半透明叠加层：

>创建一个临时的屏幕外画布

> getImageData从屏幕外画布获取像素数据

>根据需要修改像素

> putImageData将像素返回到屏幕外的画布上

>使用drawImage将屏幕外画布绘制到屏幕画布上

body\{ background-color: ivory; \}

canvas\{border:1px solid red;\}

$(function()\{

var canvas=document.getElementById("canvas");

var context=canvas.getContext("2d");

// draw an image on the canvas

var img=new Image();

img.οnlοad=start;

img.src="https://dl.dropboxusercontent.com/u/139992952/stack1/landscape1.jpg";

function start()\{

canvas.width=img.width;

canvas.height=img.height;

context.drawImage(img,0,0);

// overlay a red gradient

drawSemiTransparentOverlay(canvas.width/2,canvas.height)

\}

function drawSemiTransparentOverlay(w,h)\{

// create a temporary canvas to hold the gradient overlay

var canvas2=document.createElement("canvas");

canvas2.width=w;

canvas2.height=h

var ctx2=canvas2.getContext("2d");

// make gradient using ImageData

var imgData = ctx2.getImageData(0,0,w,h);

var data=imgData.data;

for(var y=0; y

for(var x=0; x

var n=((w\*y)+x)\*4;

data\[n\]=255;

data\[n+1\]=0;

data\[n+2\]=0;

data\[n+3\]=255;

if(x>w/2)\{

data\[n+3\]=255\*(1-((x-w/2)/(w/2)));

\}

\}

\}

// put the modified pixels on the temporary canvas

ctx2.putImageData(imgData,0,0);

// draw the temporary gradient canvas on the visible canvas

context.drawImage(canvas2,0,0);

\}

\}); // end $(function()\{\});

或者,您可以使用线性渐变检查以更直接地执行效果.

发表评论取消回复

表情：

评论列表（有 0 条评论，6人围观）

还没有评论，来说两句吧...

相关阅读

相关图片像素

片是由一个个方快（像素点）组成。而计算机中，每种颜色均可由RGB三种颜色分量合成。所以，对于计算机来说，每一个像素点，计算机存储的是RGB三种颜色的值。对于8bi...

柔光的暖阳◎/ 2024年04月18日 06:11/ 0 赞/ 138 阅读

相关 CSS媒体查询-物理像素-逻辑像素

媒体查询基本使用媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口。你可以根据设备的类型（比如屏幕设备、打印机设备）或者特定的特性（比如屏幕

水深无声/ 2023年09月28日 02:55/ 0 赞/ 178 阅读

相关什么是像素？

像素的定义：像素是指由图像的小方格组成的，这些小方格都有一个明确的位置和被分配的色彩数值，这些小方格的颜色和位置就决定该图像所呈现出来的样子。 1个小方格代表1PX，

迈不过友情╰/ 2023年01月10日 14:46/ 0 赞/ 192 阅读

相关 html去除透明部分像素,javascript – putImageData(),如果新像素是透明的,如何保留旧像素？...

您可以使用getImageData创建半透明叠加层： >创建一个临时的屏幕外画布 > getImageData从屏幕外画布获取像素数据 >根据需要修改像素 > putI

一时失言乱红尘/ 2022年10月10日 11:19/ 0 赞/ 7 阅读

相关如何修改图片像素

本文转载：[照片像素怎么修改？怎么修改照片的像素？][Link 1] 经常上传证件照的时候要求图片的像素在某某之间，这时候就需要里修改图片的像素啦，这里提供两种方式来改变像素

朴灿烈づ我的快乐病毒、/ 2022年05月30日 06:35/ 0 赞/ 257 阅读

相关物理像素和设备独立像素（dpr）

1.物理像素 (1)物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。 (2)设备独立像像索(也叫目睹无关像素

超、凢脫俗/ 2022年05月09日 04:44/ 0 赞/ 738 阅读

相关像素详解

像素，是图像显示的基本单位，英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”表示“图像元素”之意，

今天药忘吃喽~/ 2022年01月26日 23:45/ 0 赞/ 592 阅读

相关 CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport

最近看了很多这方面的文章，能搜到的基本看了个遍，但感觉还是似懂非懂，知道这个东西，很难说出这是个什么东西，先整理一些概念，慢慢消化，以后慢慢探索其中的原因。 1、PX(CS

￡神魔★判官ぃ/ 2021年11月27日 00:54/ 0 赞/ 437 阅读

相关 CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport

最近看了很多这方面的文章，能搜到的基本看了个遍，但感觉还是似懂非懂，知道这个东西，很难说出这是个什么东西，先整理一些概念，慢慢消化，以后慢慢探索其中的原因。 1、PX(CS

梦里梦外;/ 2021年11月26日 14:36/ 0 赞/ 474 阅读

相关【opencv学习笔记】005之读像素（获取像素）及写像素（修改像素、空白图像、分割图像）

目录一、前言二、图像像素操作 1、读像素 2、写像素三、全部代码及结果展示 1、代码 2、运行效果图 -------------------- 一、前

深碍√TFBOYSˉ_/ 2021年06月11日 15:14/ 0 赞/ 728 阅读