将图像转换为 Angular 中的字节数组(打字稿)
Convert an Image to byte array in Angular (typescript)
我有一个要求,我需要将所选图像(表单组的一部分)转换为字节数组,该字节数组需要作为 post 请求的一部分发送到后端。
HTML 分量:
<div class="form-group">
<label>Image</label>
<input type="file" accept="image/*" class="form-control" formControlName="productImage" onchange="displaySelectedImageFunc(this);">
<img *ngIf="displaySelectedImage" src="{{selectedImageUrl}}">
<span class="error-message" *ngIf="itemRegistrationForm.controls.productImage.dirty && itemRegistrationForm.controls.productImage.errors">Select Image of the product</span>
</div>
尝试使用
function convertDataURIToBinary(dataURI) {
var base64Index = dataURI.indexOf(';base64,') + ';base64,'.length;
var base64 = dataURI.substring(base64Index);
var raw = window.atob(base64);
var rawLength = raw.length;
var array = new Uint8Array(new ArrayBuffer(rawLength));
for(i = 0; i < rawLength; i++) {
array[i] = raw.charCodeAt(i);
}
return array;
}
function upload() {
const file = document.querySelector('input[type=file]').files[0];
const preview = document.getElementById('preview');
const reader = new FileReader();
let byteArray;
reader.addEventListener("loadend", function () {
// convert image file to base64 string
console.log('base64', reader.result);
preview.src = reader.result;
byteArray = convertDataURIToBinary(reader.result);
console.log('byte array', byteArray);
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
<input type="file" id="file" accept="image/*" width="300" height="300" />
<submit onClick="upload()">Upload</submit>
<img id="preview"></img>
由于您可以使用 reader.readAsDataUR(file)
将图像转换为 base64 字符串,因此您可以在 reader.onload
事件中使用 e.target.result.split('base64,')[1]
提取字节部分,就像这样
const file = document.querySelector('input[type=file]').files[0])
const reader = new FileReader();
reader.onload = (e: any) => {
const bytes = e.target.result.split('base64,')[1];
};
reader.readAsDataURL(file);
我有一个要求,我需要将所选图像(表单组的一部分)转换为字节数组,该字节数组需要作为 post 请求的一部分发送到后端。
HTML 分量:
<div class="form-group">
<label>Image</label>
<input type="file" accept="image/*" class="form-control" formControlName="productImage" onchange="displaySelectedImageFunc(this);">
<img *ngIf="displaySelectedImage" src="{{selectedImageUrl}}">
<span class="error-message" *ngIf="itemRegistrationForm.controls.productImage.dirty && itemRegistrationForm.controls.productImage.errors">Select Image of the product</span>
</div>
尝试使用
function convertDataURIToBinary(dataURI) {
var base64Index = dataURI.indexOf(';base64,') + ';base64,'.length;
var base64 = dataURI.substring(base64Index);
var raw = window.atob(base64);
var rawLength = raw.length;
var array = new Uint8Array(new ArrayBuffer(rawLength));
for(i = 0; i < rawLength; i++) {
array[i] = raw.charCodeAt(i);
}
return array;
}
function upload() {
const file = document.querySelector('input[type=file]').files[0];
const preview = document.getElementById('preview');
const reader = new FileReader();
let byteArray;
reader.addEventListener("loadend", function () {
// convert image file to base64 string
console.log('base64', reader.result);
preview.src = reader.result;
byteArray = convertDataURIToBinary(reader.result);
console.log('byte array', byteArray);
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
<input type="file" id="file" accept="image/*" width="300" height="300" />
<submit onClick="upload()">Upload</submit>
<img id="preview"></img>
由于您可以使用 reader.readAsDataUR(file)
将图像转换为 base64 字符串,因此您可以在 reader.onload
事件中使用 e.target.result.split('base64,')[1]
提取字节部分,就像这样
const file = document.querySelector('input[type=file]').files[0])
const reader = new FileReader();
reader.onload = (e: any) => {
const bytes = e.target.result.split('base64,')[1];
};
reader.readAsDataURL(file);