從XMLHttpRequest獲取圖像並顯示它

我得到了這個Web服務，它爲我提供了一個（jpeg）圖像。我要的是藉此圖像，將其轉換成數據URI和HTML5的畫布上顯示，這樣的：從XMLHttpRequest獲取圖像並顯示它

obj = {}; 

    obj.xmlDoc = new window.XMLHttpRequest(); 
    obj.xmlDoc.open("GET", "/cgi-bin/mjpegcgi.cgi?x=1",false, "admin", "admin"); 
    obj.xmlDoc.send(""); 

    obj.oCanvas = document.getElementById("canvas-processor"); 
    obj.canvasProcessorContext = obj.oCanvas.getContext("2d"); 

    obj.base64Img = window.btoa(unescape(encodeURIComponent(obj.xmlDoc.responseText))); 

    obj.img = new Image(); 
    obj.src = 'data:image/jpeg;base64,' + obj.base64Img; 
    obj.img.src = obj.src 
    obj.canvasProcessorContext.drawImage(obj.img,0,0);

不幸的是，這段代碼不能正常工作;圖像沒有畫在畫布上（加上它似乎有寬度和高度= 0，它可能沒有正確解碼？我沒有例外）。 img.src看起來像data:image/jpeg;base64,77+977+977+977+9ABBKRklG....

解決：原來我應該重寫與MIME類型：

req.overrideMimeType('text/plain; charset=x-user-defined');

，並設置響應類型：

req.responseType = 'arraybuffer';

（見this。如果您更改響應類型，您也應該發出異步請求）。

來源

2012-04-02 janesconference

首先你需要創建一個img元素（它是隱藏的）然後你完成你所做的，除了你在你的img元素上聽onload事件。啓動此事件時，您可以獲取圖片的寬度和高度，以便您可以將畫布設置爲相同大小。

您可以像在最後一行那樣繪製圖像。

來源

2012-04-03 10:37:46 Tim

我用數據URI來源的圖像立即準備好了，但即使使用onload事件它也不會起作用（反而會觸發onerror）。無論如何，我解決了這個問題，看我最後的編輯。 – janesconference 2012-04-03 11:43:36

從XMLHttpRequest獲取圖像並顯示它

回答

相關問題