如何在javascript中将字节数组转换为图像 [英] How do i convert byte array to image in javascript

问题描述

我想使用Java脚本将字节数组转换为图像，以便在前端显示它.我正在使用blob将图像插入mysql数据库.在保存之前，图像已被转换为字节数组.

I want to convert byte array to image using Javascript for displaying it in frontend. I am inserting an image into mysql database using blob. The image has been converted to byte array before saving.

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

And I'm retrieving all the table values using json array and displaying using javascript. In the json array i'am adding this image as bytearray also.

我能够检索其他值，但是不能将此字节数组显示为图像.

I am able to retrieve the other values, but not able to display this byte array as image.

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

How do i convert this byte array to an image in javascript so that i can display it using 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]);
        }
    };

推荐答案

如果图像很小，则可以在base 64中对其进行编码，并将其作为img标签的src.

If the image is small you can encode it in base 64 and put that as the src of an img tag.

这篇关于如何在javascript中将字节数组转换为图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！