Currently facing a significant challenge as I transition from using Flash to JS. The issue lies in handling SOAP returned data, specifically when dealing with images stored as strings that need to be converted into BitmapData for use in Flash. Despite trying various approaches, the best result achieved is a green image with noise on the canvas. Below are snippets of code that may prove helpful:
Flash Code:
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);
}
The decByteArrToHexStr function returns a string where two hex characters represent a byte. This string is then sent via SOAP and retrieved when needed. Thus concludes the Flash part.
Now, the objective is to convert this string into image data suitable for placement onto a canvas.
I have a method for converting a string to 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' + str.substr(i, 2), 0);
if (!isNaN(n)) {
byteArr[i] = n;
}
}
return data;
}
Subsequently, in the response handler, the following steps are performed:
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;
The downloadedImage.sData contains a hex string. The JPGEncoder package utilized is a revamped version of the Flash JPGEncoder for JS (https://www.npmjs.com/package/@koba04/jpeg-encoder). Despite efforts, the result obtained remains a green image with some artifacts on the canvas.
Thank you in advance for any assistance provided.