<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>get/putImageData</title>
</head>
<body>
<canvas id=‘myCanvas‘ width=‘800‘ height=‘400‘>
your browser does not support canvas
</canvas>
<script type="text/javascript">
var c = document.getElementById(‘myCanvas‘);
var cxt = c.getContext(‘2d‘);
var img = new Image();
img.src = ‘face.jpg‘;
img.onload = function() {
// 从10,10坐标开始绘制整个图片
cxt.drawImage(img, 10, 10);
// 获取从50,50到200,200的区域
var imgData = cxt.getImageData(50,50,200,200);
// 将获得的整个像素绘制到10,260开始的Canvas上面
cxt.putImageData(imgData,10,260);
// 将取得的一部分像素(从50,50开始宽高为100,100)，
// 绘制到200,260开始的Canvas上面
cxt.putImageData(imgData,200,260,50,50,100,100);
};
</script>
</body>
</html>
时间： 2024-11-12 04:16:46