思路一对图片进行缩放的算法是不是有问题？

源自：2-3 Canvas基础在画布中心缩放图像

思路一对图片进行缩放的算法是不是有问题？

思路一中用drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)这个方法在原图上从坐标（sx,sy）截取宽为sw高为sw的一部分图像，然后绘制到画布上，貌似算法有问题，因为截取是从原图（sx,sy）截取的，并没有先对原图进行缩放

提问者：熊出没 2019-09-19 23:27

个回答

qq_慕码人827561

2019-10-14 09:22:14

我看的时候也觉得有问题。。。不知道是不是我的理解有问题，截取是从原图（sx,sy）截取的，思路1正确的做法我觉得应该是把canvas的宽高等比缩小后原图宽高的1/2减去缩小后的画布宽高的1/2，截取下来的部分再放在画布上(0,0,canvas.width,canvas.height)

2

熊出没: 2019-09-20 14:54:55

function drawImageByScale(scale){
    // 原图尺寸
    var imageWidth=canvas.width; 
    var imageHeight=canvas.height;
    if(scale>=1){
        // 原图上截取的区域大小
        var sw=imageWidth/scale;
        var sh=imageHeight/scale;
        // 原图上截取位置的坐标
        var sx=imageWidth/2-sw/2;
        var sy=imageHeight/2-sh/2;
        var dx=0;
        var dy=0;
        var dw=canvas.width
        var dh=canvas.height
    } else {
        var sw=imageWidth;
        var sh=imageHeight;
        var sx=0;
        var sy=0;
        var dx=canvas.width/2-sw/2*scale;
        var dy=canvas.height/2-sh/2*scale;
        var dw=sw*scale;
        var dh=sh*scale;
    }
    context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
}