                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /Canvas玩转图像处理

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

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

熊出没

2019-09-19

源自：Canvas玩转图像处理 2-3

关注问题我要回答

1471

操作

收起

2 回答

qq_慕码人827561
2019-10-14

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

2 回复有任何疑惑可以回复我~

收起回答

慕神148822

是的，没错

2020-05-22 回复有任何疑惑可以回复我~

熊出没提问者
2019-09-20

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)
}

1 回复有任何疑惑可以回复我~

收起回答