Cách lấy kích thước của hình ảnh base64 trong JavaScript

Trong các bài viết này, chúng tôi sẽ tính toán độ dài chính xác của ảnh Base64 từ Máy ảnh gốc Ionic. Thư viện tính bằng Kilobyte. Base64 mã hóa ba byte thành bốn ký tự. Đôi khi, phần đệm được thêm vào dưới dạng một hoặc hai ký tự '='. Tính Kích thước hình ảnh Base64 trong ion, trước tiên hãy tạo một dự án ion và cài đặt plugin cần thiết

Tính toán kích thước hình ảnh Ionic hoặc Angular Base64

Để có được độ dài của byte, chúng tôi sử dụng công thức

(3 * (LengthInCharacters / 4)) - (numberOfPaddingCharacters)

Nếu bạn đang xây dựng một ứng dụng ion chỉ dành cho thiết bị di động, thì chúng ta có thể sử dụng plugin máy ảnh Ionic Cordova nếu không thì nên sử dụng plugin máy ảnh tụ điện. Để chứng minh tính toán kích thước hình ảnh base64 góc theo kilobyte, chúng tôi sẽ sử dụng máy ảnh Cordova ion để chụp ảnh trong base64 và sau đó thực hiện phép tính kích thước hình ảnh

Bước 1. Tạo một dự án ion và thêm một máy ảnh gốc Cordova ion
Khi chúng tôi thực hiện lệnh dưới đây, nó sẽ cho phép chúng tôi chọn một khung và mẫu. Chúng ta phải chọn khung Angular và chọn một mẫu trống

ionic start cordovaCameraApp

ionic cordova plugin add cordova-plugin-camera
npm install @ionic-native/camera

Chúng tôi đã sử dụng máy ảnh Ionic Cordova, bạn có thể sử dụng máy ảnh Tụ điện hoặc máy ảnh Góc khác. Khi chúng tôi đã có hình ảnh base64 từ bất kỳ nguồn nào ở trên, chúng tôi có thể tính toán hình ảnh base64 một cách dễ dàng

Bước 2. Thêm mã TypeScript để tính toán kích thước hình ảnh base64 tính bằng KiloBytes trong nhà. trang. ts

import { Component } from '@angular/core';
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  image: string;
  base64Str: any;
  kbytes: number;

  constructor(private camera: Camera) { }

  async takePhoto(sourceType) {
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      sourceType
    };

    this.camera.getPicture(options).then((imageData) => {
      // imageData is either a base64 encoded string or a file URI
      // If it's base64 (DATA_URL):
      this.image = 'data:image/jpeg;base64,' + imageData;
      this.base64Str = this.image.split(',');

      if (this.calculateImageSize(this.base64Str[1]) > 50) {
        alert('Reduce the size of image');
      }
    }, (err) => {
      // Handle error
      console.error(err);
    });
  }

  calculateImageSize(base64String) {
    let padding;
    let inBytes;
    let base64StringLength;
    if (base64String.endsWith('==')) { padding = 2; }
    else if (base64String.endsWith('=')) { padding = 1; }
    else { padding = 0; }

    base64StringLength = base64String.length;
    console.log(base64StringLength);
    inBytes = (base64StringLength / 4) * 3 - padding;
    console.log(inBytes);
    this.kbytes = inBytes / 1000;
    return this.kbytes;
  }
}

Trong TypeScript, trước tiên chúng tôi lấy hình ảnh từ máy ảnh hoặc thư viện hình ảnh ở định dạng base64 bằng cách chỉ định DestinationType. DATA_URL tùy chọn trong máy ảnh. Khi chúng tôi có một hình ảnh thì chúng tôi sẽ sử dụng phương thức tính toánImageSize để lấy kích thước hình ảnh ion base64 tính bằng kilobyte.  

Ghi chú này cho biết cách lấy chiều rộng và chiều cao của hình ảnh bên trong bộ điều khiển AngularJS với sự trợ giúp của thư viện ng-flow. Trước hết, bạn có thể lấy kích thước hình ảnh bằng cách sử dụng hàm tạo phần tử Hình ảnh và chỉ định hàm gọi lại onload sau

1
2
3
4
5
6
7
8

var image = new Image();
image.src = "Image url or base64 string";
var width;
var height;
image.onload = function() {
    width = this.width;
    height = this.height;
};

Tuy nhiên, vì ng-flow trả về một đối tượng tệp, trước tiên bạn cần lấy nguồn tệp, như được hiển thị trong mẫu mã ở trên, có thể là URL hình ảnh hoặc chuỗi được mã hóa Base64. Hãy lấy chuỗi Base64 bằng cách sử dụng cách tiếp cận từ Get a Base64 Encoded Image Using Ng-flow in AngularJS note

Làm cách nào để lấy kích thước tệp của hình ảnh base64 trong JavaScript?

Làm cách nào để lấy base64 từ hình ảnh trong JavaScript?

Làm cách nào để có được chiều rộng và chiều cao của bản in hình ảnh base64?

kích thước của base64 char là gì?