Chuyển đổi base64 thành tệp hình ảnh javascript

Hôm nay, Chúng tôi muốn chia sẻ với các bạn javascript base64 to image. Trong bài đăng này, chúng tôi sẽ giới thiệu cho bạn base64 để phản ứng với hình ảnh, hãy nghe đối với base64 cho nodejs hình ảnh, chúng tôi sẽ cung cấp cho bạn bản demo và ví dụ để triển khai. Trong bài đăng này, chúng ta sẽ tìm hiểu về Base64 Encode Decode String Sử dụng js với một ví dụ

Làm cách nào để chuyển đổi hình ảnh base64 thành tệp hình ảnh và tải nó lên ở dạng không đồng bộ?

nội dung

Cũng đọc phần này 👉   Ví dụ đối sánh nhiều bộ chọn lớp jQuery

ví dụ 1. chuyển đổi base64 thành hình ảnh

var profile = new Image();
profile.src = 'data:image/png;base64,iLOGIwJD...';
document.body.appendChild(profile);

ví dụ 2. chuyển đổi hình ảnh thành chuỗi Base64 bằng js

function getBase64Image(src, callback, outputFormat) {
      const profile = new Image();
      profile.crossOrigin = 'Anonymous';
      profile.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        let fullURLPIC;
        canvas.height = profile.naturalHeight;
        canvas.width = profile.naturalWidth;
        ctx.drawImage(profile, 0, 0);
        fullURLPIC = canvas.toDataURL(outputFormat);
        callback(fullURLPIC);
      };

      profile.src = src;
      if (profile.complete || profile.complete === undefined) {
        profile.src = "data:image/gif;base64,KDFSGNGFUGGJGGJGJGJGJGD///jdIIDKDJJDJDJDJDKJJSDMNSDSDUCJwAOw==";
        profile.src = src;
      }
    }

Tôi hy vọng bạn có ý tưởng về chuyển đổi base64 thành hình ảnh jQuery và tải xuống
Tôi muốn có thông tin phản hồi về infinityknow của tôi. blog com
Phản hồi, câu hỏi hoặc nhận xét có giá trị của bạn về bài viết này luôn được chào đón
Nếu bạn thích và thích bài đăng này, đừng quên chia sẻ

Bài viết liên quan

1. Chuyển đổi base64 thành hình ảnh VUEJS
2. Làm cách nào để chuyển đổi base64 thành hình ảnh và lưu trong thư mục php?
3. Nhiều thanh trượt hình ảnh trong mã nguồn html
4. Làm cách nào để tạo hiệu ứng lớp phủ di chuột cho hình ảnh?
5. Làm cách nào để mã hóa tệp PHP bằng base64?
6. làm cách nào để tạo một hình ảnh bật lên trong html?
7. jQuery nhiều thanh trượt hình ảnh băng chuyền

Cũng nên đọc phần này 👉   Trình duyệt và trình tải ảnh Laravel 6 dành cho CKEditor

Trong hướng dẫn ngắn này, chúng ta khám phá 3 phương thức JavaScript khác nhau để chuyển đổi hình ảnh thành chuỗi Base64. Chúng tôi xem xét chuyển đổi đối tượng Tệp hoặc Blob, thành phần canvas và thẻ hình ảnh

Trong tất cả các ví dụ bên dưới, chúng tôi giả định rằng chúng tôi đã có sẵn một đối tượng , , File hoặc Blob

Chúng tôi sẽ chuyển đổi hình ảnh thành DataURL, chúng tôi có thể sử dụng chức năng bên dưới để chuyển đổi DataURL thành chuỗi Base64

const getBase64StringFromDataURL = (dataURL) =>
    dataURL.replace('data:', '').replace(/^.+,/, '');

Bắt đầu nào

Hình ảnh là một đối tượng Tệp hoặc Blob

Khi hình ảnh là đối tượng File hoặc Blob, chúng tôi có thể sử dụng API

<canvas width="300" height="150" id="my-canvas">canvas>

<script>
    const canvas = document.getElementById('my-canvas');

    // Convert canvas to dataURL and log to console
    const dataURL = canvas.toDataURL();
    console.log(dataURL);
    // Logs data:image/png;base64,wL2dvYWwgbW9yZ...

    // Convert to Base64 string
    const base64 = getBase64StringFromDataURL(dataURL);
    console.log(base64);
    // Logs wL2dvYWwgbW9yZ...
script>

1, vui lòng xem bài viết này về cách chuyển đổi tệp thành chuỗi base64 hoặc dataURL

Chúng tôi cũng sẽ sử dụng API FileReader khi

Hình ảnh là một phần tử Canvas

Nếu chúng tôi có một mà chúng tôi muốn chuyển thành chuỗi Base64, chúng tôi có thể sử dụng

<canvas width="300" height="150" id="my-canvas">canvas>

<script>
    const canvas = document.getElementById('my-canvas');

    // Convert canvas to dataURL and log to console
    const dataURL = canvas.toDataURL();
    console.log(dataURL);
    // Logs data:image/png;base64,wL2dvYWwgbW9yZ...

    // Convert to Base64 string
    const base64 = getBase64StringFromDataURL(dataURL);
    console.log(base64);
    // Logs wL2dvYWwgbW9yZ...
script>

3 trên phần tử Canvas

<canvas width="300" height="150" id="my-canvas">canvas>

<script>
    const canvas = document.getElementById('my-canvas');

    // Convert canvas to dataURL and log to console
    const dataURL = canvas.toDataURL();
    console.log(dataURL);
    // Logs data:image/png;base64,wL2dvYWwgbW9yZ...

    // Convert to Base64 string
    const base64 = getBase64StringFromDataURL(dataURL);
    console.log(base64);
    // Logs wL2dvYWwgbW9yZ...
script>

Theo mặc định, canvas xuất ra định dạng PNG không mất dữ liệu, chúng ta có thể chuyển

<canvas width="300" height="150" id="my-canvas">canvas>

<script>
    const canvas = document.getElementById('my-canvas');

    // Convert canvas to dataURL and log to console
    const dataURL = canvas.toDataURL();
    console.log(dataURL);
    // Logs data:image/png;base64,wL2dvYWwgbW9yZ...

    // Convert to Base64 string
    const base64 = getBase64StringFromDataURL(dataURL);
    console.log(base64);
    // Logs wL2dvYWwgbW9yZ...
script>

4,

<canvas width="300" height="150" id="my-canvas">canvas>

<script>
    const canvas = document.getElementById('my-canvas');

    // Convert canvas to dataURL and log to console
    const dataURL = canvas.toDataURL();
    console.log(dataURL);
    // Logs data:image/png;base64,wL2dvYWwgbW9yZ...

    // Convert to Base64 string
    const base64 = getBase64StringFromDataURL(dataURL);
    console.log(base64);
    // Logs wL2dvYWwgbW9yZ...
script>

5 hoặc

<canvas width="300" height="150" id="my-canvas">canvas>

<script>
    const canvas = document.getElementById('my-canvas');

    // Convert canvas to dataURL and log to console
    const dataURL = canvas.toDataURL();
    console.log(dataURL);
    // Logs data:image/png;base64,wL2dvYWwgbW9yZ...

    // Convert to Base64 string
    const base64 = getBase64StringFromDataURL(dataURL);
    console.log(base64);
    // Logs wL2dvYWwgbW9yZ...
script>

6 cho phương thức

<canvas width="300" height="150" id="my-canvas">canvas>

<script>
    const canvas = document.getElementById('my-canvas');

    // Convert canvas to dataURL and log to console
    const dataURL = canvas.toDataURL();
    console.log(dataURL);
    // Logs data:image/png;base64,wL2dvYWwgbW9yZ...

    // Convert to Base64 string
    const base64 = getBase64StringFromDataURL(dataURL);
    console.log(base64);
    // Logs wL2dvYWwgbW9yZ...
script>

3 để có định dạng khác

Khi sử dụng

<canvas width="300" height="150" id="my-canvas">canvas>

<script>
    const canvas = document.getElementById('my-canvas');

    // Convert canvas to dataURL and log to console
    const dataURL = canvas.toDataURL();
    console.log(dataURL);
    // Logs data:image/png;base64,wL2dvYWwgbW9yZ...

    // Convert to Base64 string
    const base64 = getBase64StringFromDataURL(dataURL);
    console.log(base64);
    // Logs wL2dvYWwgbW9yZ...
script>

5 hoặc

<canvas width="300" height="150" id="my-canvas">canvas>

<script>
    const canvas = document.getElementById('my-canvas');

    // Convert canvas to dataURL and log to console
    const dataURL = canvas.toDataURL();
    console.log(dataURL);
    // Logs data:image/png;base64,wL2dvYWwgbW9yZ...

    // Convert to Base64 string
    const base64 = getBase64StringFromDataURL(dataURL);
    console.log(base64);
    // Logs wL2dvYWwgbW9yZ...
script>

6, chúng ta có thể chuyển nén hình ảnh làm đối số cuối cùng,

<canvas width="300" height="150" id="my-canvas">canvas>

<script>
    const canvas = document.getElementById('my-canvas');

    // Convert canvas to dataURL and log to console
    const dataURL = canvas.toDataURL('image/jpeg', 0.5);
    console.log(dataURL);
    // Logs data:image/jpeg;base64,wL2dvYWwgbW9yZ...

    // Convert to Base64 string
    const base64 = getBase64StringFromDataURL(dataURL);
    console.log(base64);
    // Logs wL2dvYWwgbW9yZ...
script>

0 nghĩa là nén nhiều,

<canvas width="300" height="150" id="my-canvas">canvas>

<script>
    const canvas = document.getElementById('my-canvas');

    // Convert canvas to dataURL and log to console
    const dataURL = canvas.toDataURL('image/jpeg', 0.5);
    console.log(dataURL);
    // Logs data:image/jpeg;base64,wL2dvYWwgbW9yZ...

    // Convert to Base64 string
    const base64 = getBase64StringFromDataURL(dataURL);
    console.log(base64);
    // Logs wL2dvYWwgbW9yZ...
script>

1 nghĩa là không nén

<canvas width="300" height="150" id="my-canvas">canvas>

<script>
    const canvas = document.getElementById('my-canvas');

    // Convert canvas to dataURL and log to console
    const dataURL = canvas.toDataURL('image/jpeg', 0.5);
    console.log(dataURL);
    // Logs data:image/jpeg;base64,wL2dvYWwgbW9yZ...

    // Convert to Base64 string
    const base64 = getBase64StringFromDataURL(dataURL);
    console.log(base64);
    // Logs wL2dvYWwgbW9yZ...
script>

Hình ảnh là một yếu tố img

Nếu hình ảnh của chúng tôi là một phần tử , chúng tôi có thể

<canvas width="300" height="150" id="my-canvas">canvas>

<script>
    const canvas = document.getElementById('my-canvas');

    // Convert canvas to dataURL and log to console
    const dataURL = canvas.toDataURL('image/jpeg', 0.5);
    console.log(dataURL);
    // Logs data:image/jpeg;base64,wL2dvYWwgbW9yZ...

    // Convert to Base64 string
    const base64 = getBase64StringFromDataURL(dataURL);
    console.log(base64);
    // Logs wL2dvYWwgbW9yZ...
script>

3 hình ảnh src và chuyển đổi nó thành một chuỗi Base64

Ngoài ra, chúng tôi có thể vẽ hình ảnh thành canvas và sau đó chuyển đổi canvas thành phần tử hình ảnh, điều này sẽ hữu ích nếu chúng tôi đang tìm kiếm một định dạng hình ảnh cụ thể

Nếu hình ảnh nằm trên máy chủ từ xa, cấu hình CORS của máy chủ từ xa phải cho phép tập lệnh cục bộ của chúng tôi truy cập hình ảnh

Tìm nạp nguồn hình ảnh

Lưu ý rằng loại MIME được trả về bởi máy chủ từ xa trong tiêu đề phản hồi

<canvas width="300" height="150" id="my-canvas">canvas>

<script>
    const canvas = document.getElementById('my-canvas');

    // Convert canvas to dataURL and log to console
    const dataURL = canvas.toDataURL('image/jpeg', 0.5);
    console.log(dataURL);
    // Logs data:image/jpeg;base64,wL2dvYWwgbW9yZ...

    // Convert to Base64 string
    const base64 = getBase64StringFromDataURL(dataURL);
    console.log(base64);
    // Logs wL2dvYWwgbW9yZ...
script>

4 được phản ánh trong DataURL

Nếu loại MIME không chính xác thì DataURL cũng sẽ không chính xác

<img src="my-image.jpeg" id="my-image" />

<script>
    const image = document.getElementById('my-image');

    // Get the remote image as a Blob with the fetch API
    fetch(image.src)
        .then((res) => res.blob())
        .then((blob) => {
            // Read the Blob as DataURL using the FileReader API
            const reader = new FileReader();
            reader.onloadend = () => {
                console.log(reader.result);
                // Logs data:image/jpeg;base64,wL2dvYWwgbW9yZ...

                // Convert to Base64 string
                const base64 = getBase64StringFromDataURL(reader.result);
                console.log(base64);
                // Logs wL2dvYWwgbW9yZ...
            };
            reader.readAsDataURL(blob);
        });
script>

Vẽ hình ảnh vào canvas

Trước tiên, vẽ hình ảnh thành canvas cho phép chúng tôi chuyển đổi nó sang định dạng khác

Xin lưu ý rằng phương pháp này chậm hơn so với việc chỉ tìm nạp hình ảnh

<canvas width="300" height="150" id="my-canvas">canvas>

<script>
    const canvas = document.getElementById('my-canvas');

    // Convert canvas to dataURL and log to console
    const dataURL = canvas.toDataURL('image/jpeg', 0.5);
    console.log(dataURL);
    // Logs data:image/jpeg;base64,wL2dvYWwgbW9yZ...

    // Convert to Base64 string
    const base64 = getBase64StringFromDataURL(dataURL);
    console.log(base64);
    // Logs wL2dvYWwgbW9yZ...
script>

5 như trong ví dụ trước

Một cảnh báo bổ sung là phần tử canvas có kích thước tối đa, đối với một số trình duyệt, giới hạn kích thước này rất thấp gây ra sự cố khi chuyển đổi hình ảnh

<img src="my-image.jpeg" id="my-image" />

<script>
    const image = document.getElementById('my-image');

    const toDataURL = () => {
        const canvas = document.createElement('canvas');

        // We use naturalWidth and naturalHeight to get the real image size vs the size at which the image is shown on the page
        canvas.width = image.naturalWidth;
        canvas.height = image.naturalHeight;

        // We get the 2d drawing context and draw the image in the top left
        canvas.getContext('2d').drawImage(image, 0, 0);

        // Convert canvas to DataURL and log to console
        const dataURL = canvas.toDataURL();
        console.log(dataURL);
        // logs data:image/png;base64,wL2dvYWwgbW9yZ...

        // Convert to Base64 string
        const base64 = getBase64StringFromDataURL(dataURL);
        console.log(base64);
        // Logs wL2dvYWwgbW9yZ...
    };

    // If the image has already loaded, let's go!
    if (image.complete) toDataURL(image);
    // Wait for the image to load before converting
    else image.onload = toDataURL;
script>

kết thúc

Chúng tôi đã chuyển đổi File, Blob, và thành DataURL và chúng tôi đã xem xét cách chuyển đổi DataURL thành chuỗi Base64. Bằng cách xem xét các phương pháp khác nhau để chuyển đổi hình ảnh thành chuỗi Base64, giờ đây chúng ta biết được ưu và nhược điểm của từng phương pháp

Làm cách nào để chuyển đổi hình ảnh Base64 thành tệp hình ảnh trong JavaScript?

Làm cách nào để chuyển đổi Base64 thành tệp trong JavaScript?

Làm cách nào để chuyển đổi Base64 thành tệp hình ảnh?

Làm cách nào để chuyển đổi Base64 sang định dạng tệp?