缩放HTML5画布图像

Question

构建一个网页，在该网页上我试图将图像设置为主画布的背景。 实际的图像是1600x805，我正在尝试对应用程序进行编码，以便它可以根据用户屏幕的尺寸向上或向下缩放图像。 在Prime.js我有一个对象，用于设置位于index.html中的应用程序canvas元素的属性。 这是该对象的代码：

function Prime(w,h){
        if(!(function(){
                    return Modernizr.canvas;
                })){ alert('Error'); return false; };
        this.context = null;
        this.self = this;        
        this.globalCanvasMain.w = w;
        this.globalCanvasMain.h = h;
        this.globalCanvasMain.set(this.self);
        this.background.setBg();
    }

    Prime.prototype = {
        constructor: Prime,
        self: this,
        globalCanvasMain: {
            x: 0,
            y: 0,
            set: function(ref){
                ref.context = document.getElementById('mainCanvas').getContext('2d');
                $("#mainCanvas").parent().css('position', 'relative');
                $("#mainCanvas").css({left: this.x, top: this.y, position: 'absolute'});
                $("#mainCanvas").width(this.w).height(this.h); 
            }
        },
        background: {
            bg: null,
            setBg: function(){
                this.bg = new Image();
                this.bg.src = 'res/background.jpg';
            }
        },
        drawAll: function(){

            this.context.drawImage(this.background.bg, 0,0, this.background.bg.width,this.background.bg.height, 
                                    this.globalCanvasMain.x,this.globalCanvasMain.y, this.globalCanvasMain.w,this.globalCanvasMain.h);
        }
    };

home.js是主要接口，像这样的外部对象将通过该接口与index.html的元素进行home.js 。 这里是发生了什么：

$(document).ready(function(){
    var prime = new Prime(window.innerWidth,window.innerHeight);
    setInterval(prime.drawAll(), 25);
});

出于某种原因，我对上下文的drawImage函数的调用仅裁剪了图像的左上角，并将其缩放到用户屏幕的大小。 为什么我看不到其余图像？

Answer 1

setInterval函数有问题。 您没有提供适当的功能参考。 编码

setInterval(prime.drawAll(), 25);

仅执行一次prime.drawAll ，结果是此时只加载了图像的一小部分。

正确的代码应为：

$(document).ready(function(){
    var prime = new Prime(window.innerWidth, window.innerHeight);
    setInterval(function() {
        prime.drawAll();
    }, 25);
});

Answer 2

问题在于，在您调用setInterval时，图像可能尚未完成加载。 如果图像未正确加载和解码，则drawImage将中止其操作 ：

如果图像尚未完全解码，则不会绘制任何图像

尝试绘制图像之前，需要确保已加载图像。 使用图像的onload处理程序执行此操作。 此操作是异步的，因此这意味着您还需要处理回调（或Promise）：

在后台对象中，您需要为图像加载提供回调，例如：

...
background: {
    bg: null,
    setBg: function(callback) {
        this.bg = new Image();
        this.bg.onload = callback;          // supply onload handler before src
        this.bg.src = 'res/background.jpg';
    }
},
...

现在，设置背景后，等待回调，然后继续drawAll（）（尽管，您似乎从未设置过背景，这意味着drawImage尝试绘制null ）：

$(document).ready(function(){
    var prime = new Prime(window.innerWidth, window.innerHeight);

    // supply a callback function reference:
    prime.background.setBg(callbackImageSet);

    // image has loaded, now you can draw the background:
    function callbackImageSet() {
      setInterval(function() {
        prime.drawAll();
      }, 25);
    };

如果要绘制缩放为适合画布的完整图像，则可以简化调用，只需提供新的尺寸即可（并且似乎未定义this.globalCanvasMain.x / y？）：

drawAll: function(){
    this.context.drawImage(this.background.bg, 0,0, 
                                                   this.globalCanvasMain.w,
                                                   this.globalCanvasMain.h);
}

我建议您使用requestAnimationFrame绘制图像，因为这将与监视器更新同步。

还要记住为图像对象上的onerror / onabort提供回调。