Cách chia tỷ lệ hình ảnh (theo định dạng URI dữ liệu) bằng JavaScript (mở rộng thực, không sử dụng kiểu dáng)

Question

Chúng tôi đang chụp một tab hiển thị trong trình duyệt Chrome (bằng cách sử dụng API tiện ích chrome.tabs.captureVisibleTab) và nhận ảnh chụp nhanh trong lược đồ URI dữ liệu (chuỗi mã hóa Base64).

Có thư viện JavaScript nào có thể được sử dụng để chia tỷ lệ hình ảnh thành một kích thước nhất định không?

Hiện tại, chúng tôi đang tạo kiểu cho nó thông qua CSS, nhưng phải trả tiền phạt hiệu suất vì ảnh lớn hơn 100 lần so với yêu cầu. Mối quan tâm bổ sung cũng là tải trên localStorage mà chúng tôi sử dụng để lưu các ảnh chụp nhanh của chúng tôi.

Có ai biết cách xử lý dữ liệu này được định dạng lược đồ URI và giảm kích thước của chúng bằng cách chia tỷ lệ chúng xuống không?

Tài liệu tham khảo:

• dữ liệu URI Đề án http://en.wikipedia.org/wiki/Data_URI_scheme
• Chrome Extensions API trên http://code.google.com/chrome/extensions/tabs.html
• Các "Gần đây đóng Tabs" Chrome Extension trên http://code.google.com/p/recently-closed-tabs

Answer 1

Đây là một chức năng cần làm những gì bạn cần. Bạn cung cấp cho nó URL của hình ảnh (ví dụ: kết quả từ , nhưng có thể là bất kỳ URL nào), kích thước mong muốn và gọi lại. Nó thực hiện không đồng bộ vì không có đảm bảo rằng hình ảnh sẽ được tải ngay lập tức khi bạn đặt thuộc tính src. Với một URL dữ liệu có lẽ nó sẽ vì nó không cần phải tải về bất cứ điều gì, nhưng tôi đã không thử nó.

Cuộc gọi lại sẽ được chuyển qua hình ảnh kết quả dưới dạng URL dữ liệu. Lưu ý rằng hình ảnh kết quả sẽ là PNG, vì việc triển khai toDataURL của Chrome không hỗ trợ hình ảnh/jpeg.

function resizeImage(url, width, height, callback) { 
    var sourceImage = new Image(); 

    sourceImage.onload = function() { 
     // Create a canvas with the desired dimensions 
     var canvas = document.createElement("canvas"); 
     canvas.width = width; 
     canvas.height = height; 

     // Scale and draw the source image to the canvas 
     canvas.getContext("2d").drawImage(sourceImage, 0, 0, width, height); 

     // Convert the canvas to a data URL in PNG format 
     callback(canvas.toDataURL()); 
    } 

    sourceImage.src = url; 
} 

Answer 2

Đối với các vấn đề hiệu suất, có lẽ thẻ canvas có thể giúp bạn không? https://developer.mozilla.org/en/Canvas_tutorial/Using_images#drawImage_example_2

Nếu bạn tải hình ảnh, hiển thị hình ảnh với drawImage và sau đó cố gắng loại bỏ nó, bạn có thể thành công. Nhưng tôi không chắc chắn làm cách nào để sắp xếp một canvas thành hình ảnh để lưu tệp đã đổi kích thước ...