HTML5画布drawImage（）不会在Firefox上绘制大图像

如果我尝试在本地主机中启动代码。这不显示与Mozilla Firefox的图像，但在其他浏览器显示成功。如果我尝试加载小图像加载成功HTML5画布drawImage（）不会在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>

来源

2014-09-04 Asker

我确认该图像的不当行为。似乎有一些关于该特定的图像，导致它在FF中加载失败。其他大图像在FF中正常工作并没有失败。 – markE 2014-09-04 17:27:14

我已经得到这个工作。在Firefox中使用你的确切代码......如果它在某些机器上成为问题，我不会感到惊讶，因为它的10,000px宽的图像缩小到500px。 – ericjbasti 2014-09-05 02:59:56

也许有人可以建议去哪里发生这个问题 – Asker 2014-09-08 14:14:03

这里是如何看起来在这种情况下：

$(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>

来源

2017-09-28 06:29:53

HTML5画布drawImage（）不会在Firefox上绘制大图像

回答

相关问题