我被一個相當嚴重的問題所困擾。我正在重寫Flash到JS，遇到了SOAP回傳資料處理的問題。它是關于影像的，我得到的是字串，我將其轉換為Flash中使用的BitmapData。 我試過很多不同的方法，但最好的情況是在畫布上得到一個帶噪音的綠色影像。下面是所有的代碼片段，你可能會覺得有用
。來自Flash的代碼：
private function encode(bitmap:Bitmap)：ByteArray{
var encoder:JPGEncoder = new JPGEncoder（QUALITY）。
return encoder.encode（bitmap.bitmapData）。
}
public function decodeBytes（bm:Bitmap）:void{
_bitmap = bm;
_bytesData = encode（_bitmap）。
var imgConventer:ArrayDataConventer = new ArrayDataConventer() 。
imgConventer.addEventListener(ImageConvertCompleteEvent.IMAGE_CONVERT_COMPLETE, convertCompleteHandler) 。
imgConventer.decByteArrToHexStr（bytesData）。
decByteArrToHexStr回傳字串，其中兩個十六進制字符代表位元組。這個字串被推送到SOAP中，當我想得到它的時候就會回傳。所以這是Flash部分。
現在我想把這個字串轉換為影像資料，然后放到畫布上。
我有將字串轉換為Uint8Array的方法。
public hexStrToDecByteArr(str: string): Uint8Array {
const byteArr: Uint8Array = new Uint8Array（str. length / 2）。)
for (let i: number = 0; i < str. length; i = i 2) {
const n: number = parseInt('0x'/span> str. substr(i, 2), 0）。)
if (!isNaN（n）) {
byteArr[i] = n;
}
}
return data。
}
然后在回應處理程式中，我有這樣的東西：
const decodes: ArrayDataConverter = new ArrayDataConverter() 。
const data = decodes.hexStrToDecByteArr( downloadedImage.sData) 。
const encoder: any = new JPGEncoder（100）。
const encoded = encoder.encode({width: 400, height: 300, data}）。)
const context = this.canvas. nativeElement.getContext('2d') 。
context.clearRect（0, 0, 400, 300）。
const image = new Image()。
image.onload = () => {
context.drawImage（image, 0, 0）。
};
image.src = encoded;
所以downloadImage.sData包含了十六進制字串。 JPGEncoder是我找到的軟體包，它是JPGEncoder Flash版本改寫成的JS（https://www.npmjs.com/package/@koba04/jpeg-encoder
）。正如我之前提到的，我得到的是綠色的影像，畫布上有一些噪音。
謝謝你的幫助。
uj5u.com熱心網友回復：
看起來你在用JPEG壓縮實際的像素顏色（原始的位圖資料），然后試圖將相同的JPEG資料加載到HTML5畫布中？
這種方式不會奏效，因為 Canvas 期待的是像素顏色值而不是 JPEG 壓縮演算法。
可能的修復方法 #1。在 Canvas 中使用 AS3 像素值。
在你的 AS3 代碼中，不要將其編碼為 JPEG，而只是將像素值寫成十六進制字串（來自 Array）。
public function decodeBytes(bm:Bitmap): void
{
//# 獲取像素值到一個名為。_bytesData
bm.bitmapData.copyPixelsToByteArray( bm.bitmapData.rect, _bytesData ) 。
var imgConventer:ArrayDataConventer = new ArrayDataConventer( ) 。
imgConventer.addEventListener(ImageConvertCompleteEvent.IMAGE_CONVERT_COMPLETE, convertCompleteHandler) 。
imgConventer.decByteArrToHexStr( _bytesData ) 。
然后在TypeScript（或JavaScript）方面只需將收到的資料讀入一個陣列/緩沖區。
要在 (HTML5) Canvas 中顯示圖片，您必須使用 for-loop 來讀取陣列
var canvas = document. getElementById（'myCanvas'）。
var ctx = canvas.getContext('2d') 。
var imgData = ctx.createImageData( canvas.width, canvas.height ) 。
//# 注意順序是：。
//# JS imagedata = R-G-B-A
//# AS3 bitmap = A-R-G-B
for (var i=0; i < imgData. data.length; i = 4)
{
imgData.data[i 0] = downloadedImage.sData[i 1]; //put Red
imgData.data[i 1] = downloadedImage.sData[i 2]; //put greenEN]
imgData.data[i 2] = downloadedImage.sData[i 3]; //put BLUE[/span
imgData.data[i 3] = downloadedImage.sData[i 0]; //put ALPHA>
}
//# 用影像資料更新canvas
ctx.putImageData(imgData,0，0)。
這應該會在你的網頁上的Canvas（其id為myCanvas）中顯示你的圖片。
可能的修正 #2。在陣列中使用JPEG資料......
由于上述方法是在陣列中使用JPEG資料，因此，我們可以在陣列中使用JPEG資料。
由于上述發送原始位圖資料的方法可能意味著您要發送一個大檔案，您可以嘗試使用JPEG壓縮，這種方式意味著您可以直接將您的JPEG陣列加載到一個<Image>標簽中，就像一個加載的檔案。
沒有必要對JPEG進行兩次編碼（第一次在AS3中，第二次在TypeScript中，這只是破壞了你的影像資料）
(1)
(1)首先像你在原始AS3代碼中那樣創建JPEG，然后(2)在TypeScript或HTML方面，檢查給你的前三個值（使用 這3個值是JPEG頭的正確和預期的開始位元組（它表明你的資料確實是一個作業的JPEG影像）。 在你的HTML的 然后在JavaScript中（我不知道TypeScript，所以這部分你要自己轉換） 希望這對獲得一個有效的結果是有用的。
PS：一些完整的可測驗的示例代碼（只有HTML/JS，沒有TypeScript）......
標籤：alert或console.log選項）...downloadedImage.sData[0] //應該是。0xFF（或255）
downloadedImage.sData[1] //應該是。0xD8（或216）
downloadedImage.sData[2] //應該是。0xFF（或255）
<body>部分，確保你有一個<image>標簽，等待位元組影像被添加為.src...<body>
< img id="myPic" src="none。 jpg" width="600" height="400">
</body>/span>
<script>
//# downloadedImage.sData字串必須看起來像 "0xFF,0xD8,0xFF "等（使用0xFF或0xff是相同的結果）。
var myArr = new Uint8Array( [ downloadedImage.sData ] ) 。
var blob = new Blob( [ downloadedImage.sData], { type: "image/jpeg" }; { type: "image/jpeg" );
var urlCreator = window.URL || window.webkitURL。
var imageUrl = urlCreator.createObjectURL( blob );
var img = document.getElementById( "myPic" ) 。
img.src = imageUrl;
</script>
<!DOCTYPEhtml>
<html>
<body>
<img id="myPic" src="none。 jpg" width="600" height="400">
</body>/span>
<script>
//# 正確填充陣列&完全，下面只是預期值的小例子。
var myArr = new Uint8Array ( [0xFF, 0xD8,0xFF,0xE0, 0x00 . .. 0xFF,0xD9]）。)
var blob = new Blob( [myArr], { type: "image/jpeg" }; type: "image/jpeg" );
var urlCreator = window.URL || window.webkitURL。
var imageUrl = urlCreator.createObjectURL( blob );
var img = document.getElementById( "myPic" ) 。
img.src = imageUrl;
</script>>
</html>/span>