Question

canvas图片剪切问题,求html5大神指点

代码如下：
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);
//说明：img.width=300;img.height=300;canvas.width=150;canvas.height=150;
// sx=0;sy=0;sw=150;sh=150;
context.drawImage(img,0,0,150,150,0,0,150,150);
我想做一个上传头像剪切的功能，假如图片原来宽高是300，我只截取宽高都为150的部分，初始遮罩层在左上角，现在的效果是初始位置剪切出来的图片宽高大于了150（大概有190的样子），遮罩层移动后，根据取到的sx,sy坐标截取总是有偏移，当sx=150;sy=0时，取到的图片已经是sx=300的效果了（超出了原图片的坐标），求各位大神指点（因为不能上传图片，文字描述可能有点不好理解，请见谅）
经过多次测试，发现上传不同大小的图片，偏移量都不一样，比如，原来是1024*860的图片上传后，被放到了300*300的区域显示，然后截取150*150的图片，猜测实际上是从原来图片上截取的，所以看起来跟想要的（300*300上看到的）不一样，现在这种情况该怎么处理好一些？

Answer 1

看你描述应该是图片缩放导致的问题, 假设你图片是 300*300的 画布是150*150 你将图片放到画布上已经缩小一倍了 你移动 sx sy的时候 实际计算得将倍数算进去 比如你距离画布左边是10像素 实际上你获取图片的时候应该是 10*2=20 这样猜才对