爲什麼上一張圖片在我的HTML5畫布上繪製？

該代碼繪製在畫布上的用戶本地計算機的圖像，然後將其滑動一些其他的畫布幻燈片益智遊戲爲什麼上一張圖片在我的HTML5畫布上繪製？

function drawImage(event) { 

     if (event.target.files.length <= 0) return; 
     var files = event.target.files; 
     var URL = window.URL || window.webkitURL; 
     var img = $("#image")[0]; 

     img.src = URL.createObjectURL(files[0]); 

     getCanvas("karajan").drawImage(img, 0, 0, img.width, img.height, 0, 0, 450, 450); 

     ........... 

    } 

    function getCanvas(id) { 
     var canvas = $("#" + id)[0]; 
     if (canvas.getContext) { 
      return canvas.getContext("2d"); 
     } 
     return undefined; 
    }

，並從本地計算機輸入圖像文件的標籤

<input type="file" accept="image/*" id="image_input" onchange="drawImage(event)"/> 
<img id="image"/>

並且當用戶想要改變圖像時，畫布會用之前的圖像繪製。我不知道爲什麼。在第一行drawImage函數中圖像隨着更新的圖像發生變化並在畫布上繪製

來源

2013-01-21 Pooya

您可能必須等到圖像加載完畢，即使它是數據網址。 –

@FelixKling Erm ...'data'網址不加載，它們只是。 –

@Kolink：我知道......但這並不意味着瀏覽器立即繪製或設置圖像。它可能會在當前腳本終止後執行。 –

我假設圖像實際上並沒有「加載」，直到當前腳本終止。這意味着您應該聽取圖像的加載事件，然後才能將其繪製到畫布上。我做了一些代碼重組。如果您已經有jQuery，請使用它：

$(function() { 
    var URL = window.URL || window.webkitURL; 
    var $image = $('#image').on('load', function() { 
     // clear canvas here 
     getCanvas("karajan") 
      .drawImage(this, 0, 0, this.width, this.height, 0, 0, 450, 450); 
     // ... 
    }); 

    $('#image_input').on('change', function() { 
     if (this.files.length === 0) return; 

     $image.prop('src', URL.createObjectURL(this.files[0])); 
    }); 
});

您應該仍然清除畫布，正如Kolink建議的那樣。否則，如果加載了一個新的較小圖像，則前一個較大圖像的部分仍然可見。

來源

2013-01-21 16:39:38

畫布沒有自行清除，您必須告訴它清除。您可以使用clearRect(x,y,w,h)或使用受控區域擦拭整個物體。之後，您可以繪製新圖像。

來源

2013-01-21 16:23:06

感謝Kolink，但是我在添加'canvas.clearRect（0，0，canvas.width，canvas.height）之後仍然存在這個問題;'在drawImage – Pooya

之前''clearRect'是繪製上下文，但「寬度」和「高度」是畫布的屬性。你不能將它們放在同一個'canvas'變量中。 –

爲什麼上一張圖片在我的HTML5畫布上繪製？

回答

相關問題