Question

我想使用Javascript将字节数组转换为图像，以便在前端显示它。我使用blob将图像插入mysql数据库。保存前，图像已转换为字节数组。

我正在使用json数组检索所有表值并使用javascript显示。在json数组中，我也将此图像添加为bytearray。

我能够检索其他值，但无法将此字节数组显示为图像。

如何将此字节数组转换为javascript中的图像，以便我可以使用html显示它？

以上代码：

$scope.uploadFile = function (input) {

        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {

                //Sets the Old Image to new New Image
                $('#itemImage').attr('src', e.target.result);

                //Create a canvas and draw image on Client Side to get the byte[] equivalent
                var canvas = document.createElement("canvas");
                var imageElement = document.createElement("img");

                imageElement.setAttribute('src', e.target.result);
                canvas.width = imageElement.width;
                canvas.height = imageElement.height;
                var context = canvas.getContext("2d");
                context.drawImage(imageElement, 0, 0);
                var base64Image = canvas.toDataURL("image/jpeg");

                //Removes the Data Type Prefix 
                //And set the view model to the new value
                $scope.itemImage = base64Image.replace(/data:image\/jpeg;base64,/g, '');
            }

            //Renders Image on Page
            reader.readAsDataURL(input.files[0]);
        }
    };

Answer 1

如果图像很小，你可以用base 64编码，然后把它作为img标签的src。

如何在javascript中将字节数组转换为图像

1 个答案: