Javascript関数が私の.png画像を破損しています

Question

私はウェブサイトを開発中で、ローカルフォルダに画像をアップロードしようとしています。画像を正常にアップロードしていますが、画像を開こうとするとエラーが発生します。誰も私にこの問題を解決する方法を教えてもらえますか？

ここにエラーがあります： イメージ '.PNG'を読み込めませんでした。 PNG画像ファイルを読み込むと致命的なエラーが発生します.PNGファイルではありません。ここで

は私の部分である：ここでは

<div class="form-group"> 
    <label>Please Upload your Images</label> 
    <br> 
    <area href="./img" alt="this is a test"> 
    <br> 
    <input type="file" class="form-control-file" ng-click="uploadImage()" id="uploadButton" multiple> 
</div> 

は私の関数である。

$scope.uploadImage = function(){ 
    var input = document.getElementById("uploadButton"); 
    var text = document.querySelector("area"); 
    var button = document.getElementById("submitButton"); 
    var name; 

    input.onchange = function(e) { 
     var reader = new FileReader(); 
     console.log("reader in CommandNewCtrl", reader); 
     reader.onload = function(event) { 
     console.log("event", event); 
     text.value = event.target.result; 
     button.disabled = false; 
     } 
     name = e.target.files[0].name; 
     console.log("name", name); 
     reader.readAsText(new Blob([e.target.files[0]], { 
     "type": "application/png" 
     })); 
    }; 

    button.onclick = function(e) { 
     e.preventDefault(); 
     var blob = new Blob([text.value], { 
     "type": "application/png" 
     }); 
     console.log("blob", blob); 
     var a = document.createElement("a"); 
     a.download = name; 
     console.log("a.download", a.download); 
     a.href = URL.createObjectURL(blob); 
     console.log("a.href", a.href); 
     document.body.appendChild(a); 
     a.click(); 
     text.value = ""; 
     input.value = ""; 
     button.disabled = true; 
     document.body.removeChild(a); 
    } 
}; 

Answer 1

readAsTextは、画像などのバイナリデータには適していません。代わりにreadAsArrayBufferまたはreadAsDataUrlを使用してください。

ファイルセレクタからのプレビュー画像を表示するthis exampleを参照してください。

また、Mark Schultheissが提案しているように、MIMEタイプをimage/pngに変更する必要があります。

Answer 2

サムエルとマークのこと大変ありがとうございます！このコードは動作しています！

input.onchange = function(e) { 
     var reader = new FileReader(); 
     console.log("reader in CommandNewCtrl", reader); 
     reader.onload = function(event) { 
     console.log("event", event); 
     text.value = event.target.result; 
     button.disabled = false; 
     } 
     name = e.target.files[0].name; 
     console.log("name", name); 
     reader.readAsArrayBuffer(new Blob([e.target.files[0]], { //was readAsText 
     // "type": "application/png" 
      "type": "image/png" 

     })); 
    }; 

    button.onclick = function(e) { 
     e.preventDefault(); 
     var blob = new Blob([text.value], { 
     "type": "image/png" 
     }); 
     console.log("blob", blob); 
     var a = document.createElement("a"); 
     a.download = name; 
     console.log("a.download", a.download); 
     a.href = URL.createObjectURL(blob); 
     console.log("a.href", a.href); 
     document.body.appendChild(a); 
     a.click(); 
     text.value = ""; 
     input.value = ""; 
     button.disabled = true; 
     document.body.removeChild(a); 
    } 
};