- 浏览: 2486297 次
- 性别:
- 来自: 成都
文章分类
最新评论
-
nation:
你好,在部署Mesos+Spark的运行环境时,出现一个现象, ...
Spark(4)Deal with Mesos -
sillycat:
AMAZON Relatedhttps://www.godad ...
AMAZON API Gateway(2)Client Side SSL with NGINX -
sillycat:
sudo usermod -aG docker ec2-use ...
Docker and VirtualBox(1)Set up Shared Disk for Virtual Box -
sillycat:
Every Half an Hour30 * * * * /u ...
Build Home NAS(3)Data Redundancy -
sillycat:
3 List the Cron Job I Have>c ...
Build Home NAS(3)Data Redundancy
HTML5(三)color pixel and picture
1.color
every pixel (picture element) are consist of 4 bytes.
first byte decide the red value
second byte decide the green value
third byte decide the blue value
fourth byte decide the transparency value
the value range is 0~255
(255,0,0,255) stand for pure red, in memory it is 11111111 00000000 000000000 11111111
2. manage pixel
Object ImageData stores the pixel value, it contains width,height and data properties. data property is a array.
imageData.data[index*4 + 0]
imageData.data[index*4 + 1]
imageData.data[index*4 + 2]
imageData.data[index*4 + 3]
They stands for the index+1 pixel red value, green value and blue value and transparency value.
The picture is width * height pixels. So we have width * height * 4 values in data array.
There are 3 method in context:
createImageData(width,height) all the pixels are rgba(0,0,0,0)
getImageData(x,y,width,height)
putImageData(data,x,y)
3. simple sample
my file is test3.html, we must put in under apache and test it.
<canvas id="test1" width="280" height="200" style="background-image:url(banner1.gif)">
you are out!
</canvas>
<br />
red value:<input type="range" min="1" max="100" onchange="colorChange(event,0)"/>
<br />
green value:<input type="range" min="1" max="100" onchange="colorChange(event,1)"/>
<br />
blue value:<input type="range" min="1" max="100" onchange="colorChange(event,2)"/>
<br />
transparency:<input type="range" min="1" max="100" onchange="colorChange(event,3)"/>
<script type="text/javascript">
//get the context
var canvas = document.getElementById("test1");
var ctx = canvas.getContext("2d");
//get width and height of canvas
var width = parseInt(canvas.getAttribute("width"));
var height = parseInt(canvas.getAttribute("height"));
//load the image
var image = new Image();
image.onload =imageLoaded;
image.src = "banner2.gif";
//save the array of image data
var imageData=null;
function imageLoaded() {
// draw the image on canvas
ctx.drawImage(image, 0, 0);
imageData = ctx.getImageData(0, 0, width, height);
}
function colorChange(event,offset){
imageLoaded();
for (var y = 0; y < imageData.height; y++) {
for (x = 0;x < imageData.width; x++) {
//index = pixel number
var index = y * imageData.width + x;
var p = index * 4;
var color = imageData.data[p + offset] * event.target.value / 50;
// color value range is [0..255]
color = Math.min(255, color);
//update the value in array
imageData.data[p + offset]=color
}
}
ctx.putImageData(imageData, 0, 0);
}
</script>
4. draw the random color point on canvas
my test file is test3-1.html:
<canvas id="test2" width="300" height="300" style=" background-color: black">
you are out.
</canvas>
<input type="button" value="draw point" onclick="interval=setInterval(randomPixel,1);" />
<input type="button" value="stop" onclick="clearInterval(interval);"/>
<input type="button" value="clear" onclick="clearCanvas();"/>
<script type="text/javascript">
//get the context
var canvas = document.getElementById("test2");
var ctx = canvas.getContext("2d");
//get width and height
var width = parseInt(canvas.getAttribute("width"));
var height = parseInt(canvas.getAttribute("height"));
var imageData = ctx.createImageData(width, height);
function randomPixel(){
var x= parseInt(Math.random()*width);
var y= parseInt(Math.random()*height);
var index = y * width + x;
var p = index * 4;
imageData.data[p + 0] = parseInt(Math.random() * 256);
imageData.data[p + 1] = parseInt(Math.random() * 256);
imageData.data[p + 2] = parseInt(Math.random() * 256);
imageData.data[p + 3] =parseInt(Math.random() * 256);
ctx.putImageData(imageData,0,0);
}
function clearCanvas(){
ctx.clearRect(0,0,width,height);
imageData = ctx.createImageData(width, height);
}
</script>
references:
http://www.blogjava.net/myqiao/category/46360.html
1.color
every pixel (picture element) are consist of 4 bytes.
first byte decide the red value
second byte decide the green value
third byte decide the blue value
fourth byte decide the transparency value
the value range is 0~255
(255,0,0,255) stand for pure red, in memory it is 11111111 00000000 000000000 11111111
2. manage pixel
Object ImageData stores the pixel value, it contains width,height and data properties. data property is a array.
imageData.data[index*4 + 0]
imageData.data[index*4 + 1]
imageData.data[index*4 + 2]
imageData.data[index*4 + 3]
They stands for the index+1 pixel red value, green value and blue value and transparency value.
The picture is width * height pixels. So we have width * height * 4 values in data array.
There are 3 method in context:
createImageData(width,height) all the pixels are rgba(0,0,0,0)
getImageData(x,y,width,height)
putImageData(data,x,y)
3. simple sample
my file is test3.html, we must put in under apache and test it.
<canvas id="test1" width="280" height="200" style="background-image:url(banner1.gif)">
you are out!
</canvas>
<br />
red value:<input type="range" min="1" max="100" onchange="colorChange(event,0)"/>
<br />
green value:<input type="range" min="1" max="100" onchange="colorChange(event,1)"/>
<br />
blue value:<input type="range" min="1" max="100" onchange="colorChange(event,2)"/>
<br />
transparency:<input type="range" min="1" max="100" onchange="colorChange(event,3)"/>
<script type="text/javascript">
//get the context
var canvas = document.getElementById("test1");
var ctx = canvas.getContext("2d");
//get width and height of canvas
var width = parseInt(canvas.getAttribute("width"));
var height = parseInt(canvas.getAttribute("height"));
//load the image
var image = new Image();
image.onload =imageLoaded;
image.src = "banner2.gif";
//save the array of image data
var imageData=null;
function imageLoaded() {
// draw the image on canvas
ctx.drawImage(image, 0, 0);
imageData = ctx.getImageData(0, 0, width, height);
}
function colorChange(event,offset){
imageLoaded();
for (var y = 0; y < imageData.height; y++) {
for (x = 0;x < imageData.width; x++) {
//index = pixel number
var index = y * imageData.width + x;
var p = index * 4;
var color = imageData.data[p + offset] * event.target.value / 50;
// color value range is [0..255]
color = Math.min(255, color);
//update the value in array
imageData.data[p + offset]=color
}
}
ctx.putImageData(imageData, 0, 0);
}
</script>
4. draw the random color point on canvas
my test file is test3-1.html:
<canvas id="test2" width="300" height="300" style=" background-color: black">
you are out.
</canvas>
<input type="button" value="draw point" onclick="interval=setInterval(randomPixel,1);" />
<input type="button" value="stop" onclick="clearInterval(interval);"/>
<input type="button" value="clear" onclick="clearCanvas();"/>
<script type="text/javascript">
//get the context
var canvas = document.getElementById("test2");
var ctx = canvas.getContext("2d");
//get width and height
var width = parseInt(canvas.getAttribute("width"));
var height = parseInt(canvas.getAttribute("height"));
var imageData = ctx.createImageData(width, height);
function randomPixel(){
var x= parseInt(Math.random()*width);
var y= parseInt(Math.random()*height);
var index = y * width + x;
var p = index * 4;
imageData.data[p + 0] = parseInt(Math.random() * 256);
imageData.data[p + 1] = parseInt(Math.random() * 256);
imageData.data[p + 2] = parseInt(Math.random() * 256);
imageData.data[p + 3] =parseInt(Math.random() * 256);
ctx.putImageData(imageData,0,0);
}
function clearCanvas(){
ctx.clearRect(0,0,width,height);
imageData = ctx.createImageData(width, height);
}
</script>
references:
http://www.blogjava.net/myqiao/category/46360.html
发表评论
-
MongoDB 2019(3)Security and Auth
2019-11-16 06:48 202MongoDB 2019(3)Security and Aut ... -
Memory Leak in NodeJS
2018-12-20 06:26 690Memory Leak in NodeJS I have d ... -
Remote Desktop Client
2018-12-07 13:19 1148Remote Desktop Client There is ... -
MetaBase UI Console(2)Docker on MySQL
2018-11-29 06:58 895MetaBase UI Console(2)Docker on ... -
AWS Lambda and Serverless Timeout
2018-09-20 01:20 596AWS Lambda and Serverless Timeo ... -
2018 WebSocket(1)Introduction
2018-03-20 01:22 10722018 WebSocket(1)Introduction ... -
2018 TypeScript Update(3)Introduction Basic Grammar
2018-03-08 03:08 5662018 TypeScript Update(3)Introd ... -
2018 TypeScript Update(2)Introduction Basic Grammar - Classes and Functions
2018-03-06 05:32 5162018 TypeScript Update(2)Introd ... -
2018 TypeScript Update(1)Introduction Basic Grammar - Types and Interface
2018-03-03 01:15 5662018 TypeScript Update(1)Introd ... -
Charts and Console(6)Paging
2018-03-01 00:12 555Charts and Console(6)Paging Th ... -
Vue.JS(3)Google Login
2018-02-14 04:53 1239Vue.JS(3)Google Login I just p ... -
Vue.JS(2)Monitor Water Console - ChartJS and Axios
2018-02-14 03:17 688Vue.JS(2)Monitor Water Console ... -
Vue.JS(1)Introduction and Basic Demo
2018-02-08 06:47 569Vue.JS(1)Introduction and Basic ... -
Charts and Console(5)Validation Form
2017-10-03 05:12 766Charts and Console(5)Validation ... -
Charts and Console(4)Display and Enhancement
2017-09-20 05:39 602Charts and Console(4)Display an ... -
Charts and Console(3)Auth and Login
2017-09-13 03:45 625Charts and Console(3)Auth and L ... -
Charts and Console(2)Login and Proxy
2017-08-31 05:39 840Charts and Console(2)Login and ... -
Charts and Console(1)UI Console and RESTful Client
2017-08-29 11:02 735Charts and Console(1)UI Console ... -
Blog Project(2)Express Backend API - istanbul - mocha - bunyan
2017-06-09 00:05 446Blog Project(2)Express Backend ... -
ReactJS(5)Composition vs Inheritance
2017-06-06 05:55 1071ReactJS(5)Composition vs Inheri ...
相关推荐
html5像素点pixel,里面包括css文件和JavaScript程序。
With vertex shaders for the programmable geometry pipeline and pixel shaders for the programmable pixel pipeline, the control over geometry and pixels was handed back to the developer....
讲解HLSL and Pixel Shaders的国外原版书,非扫描版
计算机图形学 着色器 顶点着色器 像素着色器 DirectX 3D
This book is intended for people that have some background in DirectX8 or DirectX9 programming and want to upgrade their knowledge to DirectX 10. At some point this book will be available on paper and...
Pixel Bender basics for Flex and AIR -- Sample files
Pixel Perfect Camera script gives more control over the camera size and enables pixel perfect rendering for pixel art Sprites and Canvas elements.
HTML5 Canvas生成粒子效果的人物头像html5-canvas-pixel-image-master.zip
Pixel
谷歌pixel 3刷写第三方twrp3.6版本教程+工具 资源说明: 1----刷写第三方twrp的前提是手机要解锁bl先。请自行解锁bl先。 2----资源可以支持当前机型刷写第三方rec 3-----内含刷写资源和详细刷写教程步骤 4-----...
html5-canvas-border-pixel-progressbar源码
The slides and video for "Life of a Pixel" are now publically available. This talk is an introduction to Chromium's rendering pipeline. It traces all the steps from web content to displayed pixels, ...
Pixel 2 Android 驱动 编译android源码用 国内下载不了 android官网下的
Direct3D ShaderX (Vertex and Pixel Shader Tips and Tricks).rar pdf格式
cloacked-pixel-master
Pro HTML5 and CSS3 Design Patterns is a reference book and a cookbook on how to style web pages using CSS3 and HTML5. It contains 350 ready–to–use patterns (CSS3 and HTML5 code snippets) that you ...
这是使用 PixelCNN 解码器生成条件图像的 Tensorflow 实现,其引入了最初在像素周期性神经网络中提及的基于 PixelCNN 架构的门控 PixelCNN 模型。该模型可以基于标签或图像的潜在表示来相应地生成图像。图像也可以无...
谷歌 Pixel4机型基带xqcn文件 完好基带qcn文件 双串码正常 请对照型号下载 可以解决常规更新降级刷第三方导致的基带丢失。 需要开端口才可以写入 会使用有需要的友友下载 需要我的资源可以为你带来帮助 谢谢 参考...
Pixel Bender Toolkit2.5
Vertex And Pixel Shader Programming With Directx 9.