從畫布創建圖像導致在Firefox中的空白圖像

好吧，我發現問題是什麼。每次你說新的Image（）你都必須使用onload處理器來確保圖像真正加載。即使你通過toDataURL分配了src屬性。從畫布創建圖像導致在Firefox中的空白圖像

我想獲得給定圖像的子圖像。在Google Chrome中輸入console.log(createSubImg(img, 0, 0, 20, 20)); 我可以看到圖像。在Firefox中，我看到一個空的圖像。我錯了什麼？

我的方法是這樣的：

function createSubImg(img, x, y, width, height) { 
    var canvas = document.createElement('canvas'); 
    canvas.width = width; 
    canvas.height = height; 
    var ctx = canvas.getContext('2d'); 
    ctx.drawImage(
      img, 
      x * width, 
      y * height, 
      width, 
      height, 
      0, 
      0, 
      width, 
      height); 


    var result = new Image(); 
    result.src = canvas.toDataURL(); 
    return result; 
}

來源

2015-06-29 OOPDeveloper89

嗨，什麼是在'img'變量？ – bbosternak

你好。這是一個html圖像元素。 – OOPDeveloper89

根據您的評論編輯我的答案 – bbosternak

它的工作對我來說是這樣的：

var img; 
(function(){ 
    img = document.getElementById('example'); 
    img.onload = function(){ 
     console.log(createSubImg(img, 0, 0, 20, 20)); 
    }; 
});

，如果我在Firefox寫console.log(createSubImg(img, 0, 0, 20, 20));它也能工作。

來源

2015-06-29 10:30:05 bbosternak

下面是解

<body> 
<form id="form1" runat="server" style="position: relative;"> 
    <img id="scream" width="220" height="277" src="Images/01.jpg" alt="The Scream" /> 

    <img id="test" src="#" /> 
</form>

腳本的一部分是在這裏

<script type="text/javascript"> 
    $(function() { 
     var canvas = document.createElement('canvas'); 
     var img = document.getElementById("scream"); 
     var ctx = canvas.getContext("2d"); 
     var res = createSubImg(img, 0, 0, 200, 200, canvas, ctx); 
     var myImage = $("#test"); 
     myImage.attr('src', res.src); 
    }); 

    function createSubImg(img, x, y, width, height, canvas, ctx) { 
     canvas.width = width; 
     canvas.height = height; 
     ctx.drawImage(
        img, 
        x * width, 
        y * height, 
        width, 
        height, 
        0, 
        0, 
        width, 
        height); 

     var result = new Image(); 
     result.src = canvas.toDataURL(); 
     return result; 
    } 
</script>

來源

2015-06-29 12:04:46 Sreejith

從畫布創建圖像導致在Firefox中的空白圖像

回答

相關問題