바이트 배열을 자바 스크립트에서 이미지로 변환하는 방법

Question

바이트 배열을 Javascript를 사용하여 이미지로 변환하여 프론트 엔드에 표시하려고합니다. blob을 사용하여 이미지를 mysql 데이터베이스에 삽입하려고합니다. 저장하기 전에 이미지가 바이트 배열로 변환되었습니다.

그리고 json 배열을 사용하고 자바 스크립트를 사용하여 모든 테이블 값을 가져옵니다. json 배열에서이 이미지를 bytearray로 추가합니다.

다른 값을 검색 할 수 있지만이 바이트 배열을 이미지로 표시 할 수 없습니다.

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

경우 기본 64에서 인코딩 및 img 태그의 src 같은 것을 넣을 수 있습니다.