Hướng dẫn data uri to image javascript - dữ liệu đi tiểu đến javascript hình ảnh

Question

/**
 * Converts data URI in 'image/png' format to an image data object
 * @param dataURL Base64 encoded string
 * @returns {ImageData/undefined}
 */
convertDataURLToImageData: function (dataURL) {
    if (dataURL !== undefined && dataURL !== null) {
        var canvas, context, image, imageData;
        canvas = document.createElement('canvas');
        canvas.width = 470;
        canvas.height = 470;
        context = canvas.getContext('2d');
        image = new Image();

        image.addEventListener('load', function(){
            context.drawImage(image, 0, 0, canvas.width, canvas.height);
            imageData = context.getImageData(0, 0, canvas.width, canvas.height);
            //how do i return this?
        }, false);
        image.src = dataURL;

        return imageData;
     }
}

Xem xét đoạn trích ở trên, nếu tôi muốn lấy một mảng dữ liệu hình ảnh từ URL dữ liệu, tôi sẽ vẽ nó trên khung vẽ, làm cách nào để trả lại dữ liệu hình ảnh?

Nội dung chính Show

Làm thế nào dữ liệu được sử dụng trong hình ảnh URI?
Dữ liệu URI I JavaScript là gì?
Làm thế nào để bạn chuyển đổi URI dữ liệu thành tệp sau đó nối vào formdata?
Làm thế nào để bạn sử dụng URI dữ liệu?

JavaScript có quy ước để chuyển đổi URL hình ảnh hoặc hình ảnh PC cục bộ thành chuỗi base64. Chuỗi này có thể chứa một loạt các biểu tượng và chữ cái. Ở đây, nó được giải thích cách tạo một phần tử canvas, tải một hình ảnh vào đó và sử dụng Todataurl () để hiển thị biểu diễn chuỗi. Để có được biểu diễn chuỗi cơ sở64, chúng tôi cũng sẽ sử dụng tùy chọn đầu đọc tệp.

Trong trường hợp này, một phần tử canvas sẽ được tạo và kích thước của nó sẽ được chỉ định. DataURL nơi biểu diễn chuỗi sẽ được lưu trữ. Chúng tôi sẽ thêm hình ảnh ngẫu nhiên từ các nguồn trực tuyến và đảm bảo đối tượng để tránh các vấn đề bảo mật. 'Ẩn danh' như Crossorigin. Cuối cùng, chức năng gọi lại của chúng tôi sẽ chuyển dataURL cho chức năng Todataurl để thông báo cho cửa sổ rằng chuỗi base64 cho hình ảnh tương ứng đã sẵn sàng để xem trước.

Thí dụ

Ví dụ này cho thấy cách chuyển đổi hình ảnh thành URL dữ liệu Base64 trong JavaScript -

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Get URL i</title>
</head>
<body>
   <img src="https://images.unsplash.com/photo-1606115915090-be18fea23ec7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=465&q=80" id="myImg">
   <script>
      function toDataURL(src, callback){
         var image = new Image();
         image.crossOrigin = 'Anonymous';
         image.onload = function(){
            var canvas = document.createElement('canvas');
            var context = canvas.getContext('2d');
            canvas.height = this.naturalHeight;
            canvas.width = this.naturalWidth;
            context.drawImage(this, 0, 0);
            var dataURL = canvas.toDataURL('image/jpeg');
            callback(dataURL);
         };
         image.src = src;
      }
      toDataURL('https://images.unsplash.com/photo-1606115915090-be18fea23ec7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=465&q=80', function(dataURL){
         alert(dataURL);
      })
   </script>
</body>
</html>

Hướng dẫn data uri to image javascript - dữ liệu đi tiểu đến javascript hình ảnh

Cập nhật ngày 26 tháng 8 năm 2022 11:53:41

Câu hỏi và câu trả lời liên quan
Làm thế nào để chuyển đổi một hình ảnh thành blob bằng JavaScript?
Làm thế nào để có được URL dữ liệu hình ảnh trong JavaScript?
Làm thế nào để thực hiện tải trước hình ảnh với JavaScript?
Làm thế nào để chuyển đổi hình ảnh thành chuỗi base64 bằng JavaScript?
Chuyển đổi HH: MM: SS thành giây với JavaScript?
Phương thức uri.isbaseof (uri) trong C#
Phương pháp uri.makeselativeuri (uri) trong c#
Sự khác biệt giữa URL và URI
Làm thế nào để thực hiện phiên bản API Web với URI trong C# ASP.NET Webapi?
Làm thế nào để chuyển đổi các đối tượng JavaScript thành các loại dữ liệu nguyên thủy theo cách thủ công?
Thao tác dữ liệu với JavaScript
Làm thế nào để có được tài liệu tham khảo URI trong Java?
Làm thế nào để chuyển đổi hình ảnh tiêu cực thành hình ảnh tích cực bằng thư viện Java OpenCV?
Làm thế nào để chuyển đổi hình ảnh màu thành hình ảnh sepia bằng thư viện Java OpenCV?
JavaScript - chuyển đổi mảng với giá trị null thành chuỗi

Làm thế nào dữ liệu được sử dụng trong hình ảnh URI?

Dữ liệu URI là một sơ đồ định danh tài nguyên thống nhất cung cấp một cách để đưa dữ liệu trực tuyến vào các trang web. Bạn cần sao chép và dán URI dữ liệu làm đầu vào và bạn có thể lưu tệp hình ảnh đầu ra. Lưu ý: Để chuyển đổi ngược, sử dụng hình ảnh để chuyển đổi DataURI. Lưu ý: Để chuyển đổi ngược, sử dụng hình ảnh để chuyển đổi DataURI.copy & paste the Data URI as input and you can save the output image file. Note : For reverse conversion, use Image to DataURI Converter. Note : For reverse conversion, use Image to DataURI Converter.

Dữ liệu URI I JavaScript là gì?

URI dữ liệu (định danh tài nguyên thống nhất) là một sơ đồ cho phép dữ liệu được mã hóa thành một chuỗi, sau đó được nhúng trực tiếp vào HTML hoặc CSS. URL thường được biết đến hơn (Trình định vị tài nguyên thống nhất) là một tập hợp con của URI dữ liệu xác định cụ thể vị trí của tài nguyên, chẳng hạn như địa chỉ IP của trang web.a scheme that allows data to be encoded into a string, and then embedded directly into HTML or CSS. The more commonly known URL (Uniform Resource Locator) is a subset of Data URI that specifically identifies a resource's location, such as the IP address of a website.

Làm thế nào để bạn chuyển đổi URI dữ liệu thành tệp sau đó nối vào formdata?

Quy trình: Quá trình này có thể được hoàn thành trong 3 bước ...

Bước 1: Datauri được lấy làm đầu vào.....

Bước 2: DataURI được chuyển đổi thành một đối tượng Blob (đối tượng lớn nhị phân-lưu trữ bất kỳ loại dữ liệu nào ở định dạng nhị phân như hình ảnh, âm thanh và video) tệp đối tượng ..

Bước 3: Tệp đối tượng Blob được thêm vào trong phiên bản đối tượng FormData {key: value} ..

Làm thế nào để bạn sử dụng URI dữ liệu?

URI dữ liệu là chuỗi được mã hóa cơ sở64 đại diện cho một tệp.Nhận nội dung của tệp dưới dạng chuỗi có nghĩa là bạn có thể trực tiếp nhúng dữ liệu trong mã HTML hoặc CSS của mình.Khi trình duyệt gặp URI dữ liệu trong mã của bạn, nó có thể giải mã dữ liệu và xây dựng tệp gốc.directly embed the data within your HTML or CSS code. When the browser encounters a data URI in your code, it's able to decode the data and construct the original file.

programming javascript Dataurl Png to url Uint8ClampedArray to image

Hướng dẫn data uri to image javascript - dữ liệu đi tiểu đến javascript hình ảnh

Thí dụ

Làm thế nào dữ liệu được sử dụng trong hình ảnh URI?

Dữ liệu URI I JavaScript là gì?

Làm thế nào để bạn chuyển đổi URI dữ liệu thành tệp sau đó nối vào formdata?

Làm thế nào để bạn sử dụng URI dữ liệu?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội