web前端：canvas文本获取/放入像素ImageData

一刀coder 07-04 207

前言：

此刻大家对“htmlgetimagedata”大体比较注重，朋友们都需要剖析一些“htmlgetimagedata”的相关知识。那么小编也在网上搜集了一些有关“htmlgetimagedata””的相关知识，希望姐妹们能喜欢，姐妹们一起来了解一下吧！

1.canvas-font居中图解

canvas

2.canvas像素计算pixel图解

canvas

3.less

* {    margin: 0;    padding: 0;    #wrap {        width: 600px;        height: 800px;        background: tomato;        border: 2px solid white;        border-radius: 5%;        //这里不可使用position，会影响画布的坐标定位        left: 0;        top: 0;        right: 0;        bottom: 0;        margin: 5% auto;        font: 20px "微软雅黑";        text-align: center;        color: white;        transition: 2s;        &:hover {            background: steelblue;        }        h1 {            margin-top: 8%;        }        h2 {            margin-left: 30%;            margin-top: 100%;        }        #wrap-canvas {            position: absolute;            background: lightgoldenrodyellow;            left: 0;            top: 0;            right: 0;            bottom: 0;            margin: auto;        }    }}

4.js

/*canvas中可以使用ImageData对象操纵像素数据 * 1. getImageData()：包含画布区域的对象像素数据，封装为ImageData对象 *   |- getImageData(x,y,w,h) *      x/y:被提取的图像数据，矩形区域的左上角x、y像素，单位是像素 * 		w/h：被提取的图像数据，矩形区域的宽度、高度，单位是像素 *   |- data：Unit8ClampedArray类型的一维数组，包含RGBA格式的整型数据，范围在0-255（黑色到白色） A（0-255范围opacity）为不透明度 * 2. putImageData(imgData,x,y) 写入像素数据 *      x/y：let、top坐标，默认左上角 * 3. createImageData(width,height) 创建像素数据 */$(function(){	var canvasNode=document.querySelector("#wrap-canvas");	if(canvasNode.getContext){		var canvasPen=canvasNode.getContext("2d");		canvasPen.save();		canvasPen.fillStyle="steelblue";		canvasPen.beginPath();		canvasPen.fillRect(0,0,100,100);		canvasPen.restore();		//1.获取像素data:应该是100*100=10000个像素点，实际是Uint8ClampedArray(40000)，rgba像素*4		var imageData=canvasPen.getImageData(0,0,50,50);		console.log("steel blue的imageData-rgba：",imageData);				/* 2.创建imageData		 * putImageData(imgData,x,y) 写入像素数据		 *      x/y：let、top坐标，默认左上角		 * createImageData(width,height) 创建像素数据		 */		canvasPen.save();		var newImageData=canvasPen.createImageData(100,100);		canvasPen.beginPath();		for(var i=0;i<newImageData.data.length;i++){			newImageData.data[4*i+3]=100;		};		canvasPen.putImageData(newImageData,100,100);		canvasPen.restore();				//3.获取像素点		canvasPen.save();		canvasPen.fillStyle="tomato";		canvasPen.beginPath();		canvasPen.fillRect(200,200,100,100);		canvasPen.restore();		var getImage=canvasPen.getImageData(200,200,canvasNode.width,canvasNode.height);		//这里的(imagedata=get到的ImageData定位坐标，left：300=0 top：300=0  最高left/top=100，超出100即为0,0,0,0白色)		var getImageColor=getPixelColor(getImage,50,50);		console.log("tomato获取到的imageColor：",getImageColor);//[255, 99, 71, 255]				//4.改变像素		canvasPen.save();		canvasPen.fillStyle="deepskyblue";		canvasPen.beginPath();			canvasPen.fillRect(300,300,100,100);		//canvasPen.putImageData(setImage,300,300);		canvasPen.restore();		//4.1获取画布宽度及图像位置		var setImage=canvasPen.getImageData(300,300,canvasNode.width,canvasNode.height);		//4.2设置图像颜色		setPixelColor(setImage,50,50,[0,0,0,255]);		//4.3放入图像:颜色点		//canvasPen.putImageData(setImage,300,300);		//4.4整行/列替换颜色		for(var i=0;i<setImage.width;i++){			setPixelColor(setImage,i,50,[255,255,255,255]);		}		canvasPen.putImageData(setImage,300,300);		console.log("set pixel color结果：",getImageColor);	}		//4.获取图像颜色	function getPixelColor(img,x,y){		var pixelColor=[];		var pixelData=img.data;		var pixelWidth=img.width;				//获取颜色偏移量位置：column(y)*width(w)+row(x)		//r		pixelColor[0]=pixelData[(y*pixelWidth+x)*4];		//g		pixelColor[1]=pixelData[(y*pixelWidth+x)*4+1];		//b		pixelColor[2]=pixelData[(y*pixelWidth+x)*4+2];		//a		pixelColor[3]=pixelData[(y*pixelWidth+x)*4+3];		return pixelColor;	}		function setPixelColor(img,x,y,pixelColor){		var pixelData=img.data;		var pixelWidth=img.width;				pixelData[(y*pixelWidth+x)*4]=pixelColor[0];		pixelData[(y*pixelWidth+x)*4+1]=pixelColor[1];		pixelData[(y*pixelWidth+x)*4+2]=pixelColor[2];		pixelData[(y*pixelWidth+x)*4+3]=pixelColor[3];	}})

5.html

<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />		<title>canvas画布像素设置</title>	</head>	<link rel="stylesheet" href="../6-bootstrap/css/bootstrap.min.css" />	<link rel="stylesheet" href="css/16-canvas-pixel-up.css" />	<body>		<div id="wrap">			<h1>canvas动画-像素pixel</h1>			<canvas id="wrap-canvas" width="500px" height="500px"></canvas>			<h2>PS：一刀coder</h2>		</div>	</body>	<script type="text/javascript" src="../6-bootstrap/js/jquery.min.js"></script>	<script type="text/javascript" src="../6-bootstrap/js/bootstrap.min.js"></script>	<script type="text/javascript" src="js/16-canvas-pixel-up.js"></script></html>12345678910111213141516171819202122

6.效果图

canvas

本文地址：http://www.longkongtuishu.com/cabdeAmsAAVYCCg.html

标签： #htmlgetimagedata