HTML5画布drawImage()在Firefox上无法绘制大型图像

Question

如果我尝试在本地主机上运行代码，则Mozilla Firefox不显示图像，但其他浏览器可以成功显示。如果我尝试加载小图像，它会成功加载。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<canvas id="containerScaled"></canvas>
<script>
$(document).ready(function() {  
    var canvasScaled = document.getElementById("containerScaled");
    var ctxScaled = canvasScaled.getContext("2d");

    var imageWidth = 500; 
    var imageHeight = 500;


    img = new Image();
    img.onload = function() {
        ctxScaled.drawImage(img, 0, 0, imageWidth, imageHeight);
    };

    img.src = 'http://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg'
});
</script>

- Asker

---

我确认该图像存在问题。似乎是该特定图像的某些原因导致其在FF中无法加载。其他大型图像在FF中正常工作，没有失败的情况。 - markE

我已经成功地实现了这个。在Firefox中使用您的确切代码...如果您将一个10,000像素宽的图像缩小到500像素，我不会感到惊讶，因为这可能会在某些机器上出现问题。 - ericjbasti

也许有人可以建议去哪里解决这个问题。 - Asker

我有一个非常类似的问题。在我的情况下，HTML5画布可以正常处理宽度不超过8000像素的图像，但对于宽度超过此范围的图像则无法正常工作。这是在Windows 7 64位Firefox最新版本32中出现的问题。但是，在Windows 8 Firefox最新版本32中，该网站完全正常运行。 - Ganesh Jadhav

Answer 1

在这个上下文中，它看起来是这样的：

$(document).ready(function() {  
    var canvasScaled = document.getElementById("containerScaled");
    var ctxScaled = canvasScaled.getContext("2d");

    var imageWidth = 500; 
    var imageHeight = 500;


    img = new Image();
    img.onload = function() {
        ctxScaled.drawImage(img, 0, 0, imageWidth, imageHeight);
    };

    img.src = 'http://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="containerScaled"></canvas>

- Paul Sweatte