如何限制HTML5 canvas上下文比例？

Question

我正在缩放加载到html5画布中的图像，但未设置缩放比例限制（例如，宽度> 200和<1900）：

    var zoom = function(clicks){
        var pt = ctx.transformedPoint(lastX,lastY);
        ctx.translate(pt.x,pt.y);
        var factor = Math.pow(scaleFactor,clicks);
        ctx.scale(factor,factor);
        ctx.translate(-pt.x,-pt.y);

        redraw();
    }

    var handleScroll = function(evt){
        var delta = evt.wheelDelta ? evt.wheelDelta/40 : evt.detail ? -evt.detail : 0;
        document.querySelector('#brightness-value').value = 0;
        document.querySelector('#contrast-value').value = 0;
        document.querySelector('#brightness').value = 0;
        document.querySelector('#contrast').value = 0;
        if (delta) zoom(delta);

        return evt.preventDefault() && false;
    };

那么如何获得上下文的实际大小？ -那我可以检查

if (scale) factor*contextWidth 

偏小或偏大并采用因素...

Answer 1

图像尺寸是缩放尺寸。

// img is an image object
// ctx is context
// scale is scaling
ctx.setScale(scale,scale);
var displayWidth = image.width * scale; // the display width.
var displayHeight = image.height * scale; // the display height

要获得所需的最大比例

// maxImgW the max width you want
var maxImgW = 1900;  
var maxScale = maxImgW / image.width; // the scale that will get the max size
var minImgW = 200;
var minScale = minImgW / image.width; // the scale that will get the min size

Answer 2

自己解决了类似问题：

    imgRes.src = "img/01_cc.jpg";
    var sizeX = imgRes.width;
    var sizeY = imgRes.height;
...
            oldsizeX = sizeX;
            oldsizeY = sizeY;
            sizeX = sizeX * factor;
            sizeY = sizeY * factor;

            // Limit für Skalierung
            if (sizeX <= 910) {
                factor = 910 / sizeX;
                if (factor > 1) factor = 1;
            }
            if (sizeX >= 4550) {
                factor = 4550 / sizeX;
                if (factor < 1) factor = 1;
            }
            sizeX = oldsizeX * factor;
            sizeY = oldsizeY * factor;
            // console.log(sizeX+" - "+sizeY+" - "+factor);
            ctx.scale(factor, factor);
...