<!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>