我强烈建议你看看这个链接，并确保它被设置为真。

控制图像缩放行为 在Gecko 1.9.2 (Firefox 3.6)中引入 /雷鸟3.1 /耳廓1.0 Gecko 1.9.2引入了 mozImageSmoothingEnabled属性 canvas元素;如果这个布尔值 Value为false，图像不会为false 缩放时平滑。这个性质是 默认为True。看待plainprint ? 残雪。mozImageSmoothingEnabled = false;

我通过右键单击firefox中的canvas元素并另存为来获得这张图像。

var img = new Image();
img.onload = function () {
    console.debug(this.width,this.height);
    var canvas = document.createElement('canvas'), ctx;
    canvas.width = 188;
    canvas.height = 150;
    document.body.appendChild(canvas);
    ctx = canvas.getContext('2d');
    ctx.drawImage(img,0,0,188,150);
};
img.src = 'original.jpg';

不管怎样，这是你的例子的“固定”版本:

var img = new Image();
// added cause it wasnt defined
var canvas = document.createElement("canvas");
document.body.appendChild(canvas);

var ctx = canvas.getContext("2d");
var canvasCopy = document.createElement("canvas");
// adding it to the body

document.body.appendChild(canvasCopy);

var copyContext = canvasCopy.getContext("2d");

img.onload = function()
{
        var ratio = 1;

        // defining cause it wasnt
        var maxWidth = 188,
            maxHeight = 150;

        if(img.width > maxWidth)
                ratio = maxWidth / img.width;
        else if(img.height > maxHeight)
                ratio = maxHeight / img.height;

        canvasCopy.width = img.width;
        canvasCopy.height = img.height;
        copyContext.drawImage(img, 0, 0);

        canvas.width = img.width * ratio;
        canvas.height = img.height * ratio;
        // the line to change
        // ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height);
        // the method signature you are using is for slicing
        ctx.drawImage(canvasCopy, 0, 0, canvas.width, canvas.height);
};

// changed for example
img.src = 'original.jpg';

如果你只是想调整图像的大小，我建议用CSS设置图像的宽度和高度。这里有一个简单的例子:

.small-image {
    width: 100px;
    height: 100px;
}

注意，高度和宽度也可以使用JavaScript设置。下面是快速代码示例:

var img = document.getElement("my-image");
img.style.width = 100 + "px";  // Make sure you add the "px" to the end,
img.style.height = 100 + "px"; // otherwise you'll confuse IE

此外，为了确保调整大小的图像看起来不错，在图像选择器中添加以下css规则:

-ms-interpolation-mode: bicubic:在IE7中引入 图像渲染:optimizeQuality:在FireFox 3.6中引入

据我所知，除了IE之外，所有浏览器都默认使用双三次算法来调整图像大小，所以你调整后的图像在Firefox和Chrome中应该看起来不错。

如果设置css的宽度和高度不工作，你可能想玩一个css转换:

-moz-transform: scale(sx[， sy]) -webkit-transform:规模(sx (sy))

如果出于任何原因你需要使用画布，请注意有两种方法可以调整图像的大小:通过css调整画布的大小或以较小的尺寸绘制图像。

请参阅这个问题了解更多细节。

快速图像调整/重采样算法使用Hermite过滤器与JavaScript。支持透明，给予优质。预览:

更新:在GitHub上添加2.0版本(更快，web工作者+可转移对象)。终于我让它工作了!

前往： https://github.com/viliusle/Hermite-resize 演示：http://viliusle.github.io/miniPaint/

/**
 * Hermite resize - fast image resize/resample using Hermite filter. 1 cpu version!
 * 
 * @param {HtmlElement} canvas
 * @param {int} width
 * @param {int} height
 * @param {boolean} resize_canvas if true, canvas will be resized. Optional.
 */
function resample_single(canvas, width, height, resize_canvas) {
    var width_source = canvas.width;
    var height_source = canvas.height;
    width = Math.round(width);
    height = Math.round(height);

    var ratio_w = width_source / width;
    var ratio_h = height_source / height;
    var ratio_w_half = Math.ceil(ratio_w / 2);
    var ratio_h_half = Math.ceil(ratio_h / 2);

    var ctx = canvas.getContext("2d");
    var img = ctx.getImageData(0, 0, width_source, height_source);
    var img2 = ctx.createImageData(width, height);
    var data = img.data;
    var data2 = img2.data;

    for (var j = 0; j < height; j++) {
        for (var i = 0; i < width; i++) {
            var x2 = (i + j * width) * 4;
            var weight = 0;
            var weights = 0;
            var weights_alpha = 0;
            var gx_r = 0;
            var gx_g = 0;
            var gx_b = 0;
            var gx_a = 0;
            var center_y = (j + 0.5) * ratio_h;
            var yy_start = Math.floor(j * ratio_h);
            var yy_stop = Math.ceil((j + 1) * ratio_h);
            for (var yy = yy_start; yy < yy_stop; yy++) {
                var dy = Math.abs(center_y - (yy + 0.5)) / ratio_h_half;
                var center_x = (i + 0.5) * ratio_w;
                var w0 = dy * dy; //pre-calc part of w
                var xx_start = Math.floor(i * ratio_w);
                var xx_stop = Math.ceil((i + 1) * ratio_w);
                for (var xx = xx_start; xx < xx_stop; xx++) {
                    var dx = Math.abs(center_x - (xx + 0.5)) / ratio_w_half;
                    var w = Math.sqrt(w0 + dx * dx);
                    if (w >= 1) {
                        //pixel too far
                        continue;
                    }
                    //hermite filter
                    weight = 2 * w * w * w - 3 * w * w + 1;
                    var pos_x = 4 * (xx + yy * width_source);
                    //alpha
                    gx_a += weight * data[pos_x + 3];
                    weights_alpha += weight;
                    //colors
                    if (data[pos_x + 3] < 255)
                        weight = weight * data[pos_x + 3] / 250;
                    gx_r += weight * data[pos_x];
                    gx_g += weight * data[pos_x + 1];
                    gx_b += weight * data[pos_x + 2];
                    weights += weight;
                }
            }
            data2[x2] = gx_r / weights;
            data2[x2 + 1] = gx_g / weights;
            data2[x2 + 2] = gx_b / weights;
            data2[x2 + 3] = gx_a / weights_alpha;
        }
    }
    //clear and resize canvas
    if (resize_canvas === true) {
        canvas.width = width;
        canvas.height = height;
    } else {
        ctx.clearRect(0, 0, width_source, height_source);
    }

    //draw
    ctx.putImageData(img2, 0, 0);
}

我知道这是一个老话题，但它可能对像我这样的人有用，几个月后，我们第一次遇到这个问题。

这里有一些代码，可以在每次重新加载图像时调整图像的大小。我知道这根本不是最优的，但我提供它作为概念的证明。

另外，很抱歉使用jQuery来做简单的选择器，但我觉得语法太舒服了。

$(document).on('ready', createImage); $(window).on('resize', createImage); var createImage = function(){ var canvas = document.getElementById('myCanvas'); canvas.width = window.innerWidth || $(window).width(); canvas.height = window.innerHeight || $(window).height(); var ctx = canvas.getContext('2d'); img = new Image(); img.addEventListener('load', function () { ctx.drawImage(this, 0, 0, w, h); }); img.src = 'http://www.ruinvalor.com/Telanor/images/original.jpg'; }; html, body{ height: 100%; width: 100%; margin: 0; padding: 0; background: #000; } canvas{ position: absolute; left: 0; top: 0; z-index: 0; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <meta charset="utf-8" /> <title>Canvas Resize</title> </head> <body> <canvas id="myCanvas"></canvas> </body> </html>

我的createImage函数在文档加载时被调用一次，之后每次窗口接收到调整大小事件时都被调用。

我在Mac电脑上的Chrome 6和Firefox 3.6中进行了测试。这种“技术”对处理器的消耗就像夏天的冰淇淋一样，但它确实奏效了。

所以我发现了一些有趣的东西，在使用画布时可能会有所帮助:

要单独调整画布控件的大小，您需要使用height=""和width=""属性(或canvas.width/canvas. properties)。高度元素)。如果你使用CSS来调整画布的大小，它实际上会拉伸(即:调整大小)画布的内容以适应整个画布(而不是简单地增加或减少画布的面积)。

尝试将图像绘制到画布控件中，并将height和width属性设置为图像的大小，然后使用CSS将画布调整为您想要的大小，这是值得一试的。也许这将使用不同的调整大小算法。

还应该注意的是，canvas在不同浏览器(甚至不同浏览器的不同版本)中具有不同的效果。在浏览器中使用的算法和技术可能会随着时间的推移而改变(特别是Firefox 4和Chrome 6很快就会出来，这将非常强调画布渲染性能)。

此外，您可能也想尝试一下SVG，因为它可能也使用了不同的算法。

祝你好运!