博主欢迎转载，但请一定要给出原文链接，标注出处！！！谢谢~
http://blog.csdn.net/sunny_xsc1994/article/details/78355033
特别不喜欢那些随便转载别人的原创文章又不给出链接的
所以不准偷偷复制博主的博客噢~~
正好遇到js有关图像处理的一些简单操作，在这里就顺便记录一下。
JavaScript图片旋转缩放
旋转
如果想要js实现对图片的旋转，需要用到js的jQueryRotateCompressed.js库，github上搜索jQueryRotate即有，在网站中加入该脚本即可。由于旋转函数.rotate(angle)只能作用于jquery对象，不能作用于image类，所以需要先将image转化为jquery对象，调用旋转函数后，再转化为image对象。
//创建画布
var canvas=document.getElementById('canvas_id')
var ctx=canvas.getContext('2d')
//对图像进行旋转
var img=new Image()
img.src="pattern2.png" // 图片源
img.onload=function(){
var $img2=$(img) //先获取jquery对象
$img2.rotate(30) //调用旋转的函数
var img3=$img2.get(0) //再将jquery对象转换成img对象
//$('#show').html(img4) //添加到子标签，图片显示的是旋转后的图片
console.log(img3) //控制台显示的图片信息是已经旋转过的
ctx.drawImage(img3,0,0,img3.width,img3.height) //但是为什么画布上画出来的却还是原图，还不理解
var img_rotate=ctx.getImageData(0,0,img3.width,img3.height) //获取画布上的图像像素矩阵
}缩放
缩放就很简单了，乘以一个比例系数即可，参见代码：
var img=new Image()
img.src="pattern2.png"
var scale=2.0
ctx.drawImage(img,0,0,img.width*scale,img.height*scale)
var img_scale=ctx.getImageData(0,0,img.width*scale,img.height*scale) //获取画布上的图像像素矩阵JavaScript图片像素矩阵信息的获取
如果想要获取图片的像素矩阵信息，怎么办？那么只能通过画布canvas来获取，首先就得图片画在画布上，然后通过getImageData(x,y,width,height)来获取，参照前面两个例子最后两行代码，x和y为想要获取图片信息的左上角坐标，width和height即为想要获取图片的宽高值。
有一点要注意的是，getImageData不支持跨域问题，也就是说，当你打开本地的一个网站时，它的域名是file:开头的，而你image如果也是从本地打开，那么则是类似D:这种开头。因此，浏览器在调试的时候，会报错，显示“The canvas has been tainted by cross-origin data.” 如果遇到这种问题，换下火狐浏览器就可以了。
通过getImageData获取的图片img类型有三个属性值，img.width，img.height，img.data。（PS：这里通过getImageData获取得img类型，并不是上面两个例子中new Image()的类型！！！）
获取各像素点rgba通道值的代码如下：
var l = img.data.length;
for (var i = 0; i < l; i += 4) {
var R = img.data[i+0]
var G = img.data[i+1]
var B = img.data[i+2]
var A = img.data[i+3]
}那么，如果我获取图片像素矩阵信息进行修改后，又想把结果画在画布上怎么办？通过画布的putImageData()即可。
//putImageData(img,bg_x,bg_y,img_x,img_y,img_width,img_height)
//W3C网站上给出的参数顺序是错误的。
//bg_x,bg_y:在画布上放图像的坐标位置
//img_x,img_y:img对象上需要放在画布上区域的左上角的位置坐标
//img_width,img_height:img对象需要画在画布上区域的宽和高
ctx.putImageData(img,0,0)