经管之家送您一份
应届毕业生专属福利!
求职就业群
感谢您参与论坛问题回答
经管之家送您两个论坛币！
+2 论坛币
剪裁图像
使用绘制函数重载
drawImage(img, x, y);
drawImage(img, x, y, width, height);
drawImage(img, sx, sy, swidth, sheight, x, y , width, height);
sx 可选，时开始剪切的x坐标位置；sy同（y坐标位置）
swidth（被剪切图像的宽度）wheight（被剪切图像的高度）
x,y（画布上放置图像的坐标位置）
width/height（可选，要使用的图像的宽高度，伸展或缩小图像）
var ctx = c.getContext("2d");
var img = new Image();
img.src = "img01.png";
img.onload=function(){
ctx.drawImage(img, 100,100,100,100,0,0,100,100);
};
像素级操作（有很多操作，示例时通过修改像素反转图像颜色）
img.onload = function(){
ctx.drawImage(img, 0, 0);
var imgData = ctx.getImageData(0, 0, c.width, c.height);
// convert color
for (var i=0; i<imgData.data.length; i+=4){
imgData.data = 255-imgData.data;
imgData.data[i+1] = 255-imgData.data[i+1];
imgData.data[i+2] = 255-imgData.data[i+2];
imgData.data[i+3] = 255;
}
ctx.putImagedata(imgdata,0, 0);
}
此例使用了getImageData函数获取图片数据，在Chrome中涉及跨域问题，无法直接在浏览器中浏览，必须通过服务器访问。
![二维码]()
扫码加我 拉你入群
请注明：姓名-公司-职位
以便审核进群资格，未注明则拒绝
|
发帖
雷达卡
京公网安备 11010802022788号
