使用通用處理程序將圖像加載到畫布中

是否可以使用通用處理程序直接將圖像加載到canvas控件中而不使用圖像元素？使用通用處理程序將圖像加載到畫布中

這是我的處理程序：

public void ProcessRequest(HttpContext context) 
    { 
     context.Response.AddHeader("Access-Control-Allow-Origin", "*"); 
     context.Response.ContentType = "image/jpeg"; 
     var camIndex = Convert.ToInt16(context.Request.QueryString["camIndex"]); 
     context.Response.BinaryWrite(Shared.Feeder[camIndex].JpegData);   
    }

我的javascript：

var xhr = new XMLHttpRequest(); 
xhr.open('GET', 'http://127.0.0.1/Media/FrameHandler.ashx?camIndex=' + camIndex, true);      
xhr.responseType = 'arraybuffer'; 
xhr.onload = function (e) { 
    var uInt8Array = new Uint8ClampedArray(this.response); 
    imageData[camIndex].data.set(uInt8Array); 
    ctxLiveViews[camIndex].putImageData(imageData[camIndex], 0, 0); 
}; 
xhr.send();

這給了我這個形象（這顯然是錯誤的）

enter image description here

來源

2015-05-09 Andrew Simpson

你看過這篇文章 - 特別是關於手動解析你的原始JPEG照相機流：http://stackoverflow.com/questions/28827670/create-html-canvas-from-ajax-arraybuffer-response-type/ 28827942＃28827942 – markE

除非你願意在Javascript中實現JPEG解碼器。 – Philipp

MarkE感謝您的鏈接 –

是它可能加載一個我使用通用處理程序而不使用圖像元素直接將圖像轉換爲畫布控件？

它，但你是在手滿，你將需要手動解析圖像文件格式你們（帶圖像格式，色彩模式等和錯誤檢查等的所有各種組合）。這是可行的（been there done that），但除非需要訪問某些特殊數據或位圖格式，否則瀏覽器至少比JavaScript中的手動方法更快完成工作。

使用Image元素非常簡單，可以在編譯代碼中爲您執行所有這些步驟。

這條線：

var uInt8Array = new Uint8ClampedArray(this.response);

僅能將原始文件字節，無壓縮，未解碼包括頭，塊和元數據。而putImageData()需要每像素RGBA格式的原始位圖。這就是爲什麼你會看到噪聲，因爲putImageData的數據是文件本身，而不是位圖。

來源

2015-05-14 02:57:44 K3N

謝謝你的所有:) –

使用通用處理程序將圖像加載到畫布中

回答

相關問題