本文共 1977 字，大约阅读时间需要 6 分钟。

博主欢迎转载，但请一定要给出原文链接，标注出处！！！谢谢~

特别不喜欢那些随便转载别人的原创文章又不给出链接的

所以不准偷偷复制博主的博客噢~~

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.0ctx.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)