Dom-to-image
Đó là gì
dom-to-image là một thư viện có thể biến bất kỳ nút DOM nào thành hình ảnh vector (SVG) hoặc raster (PNG hoặc JPEG), viết bằng JavaScript. Nó được dựa trên domvas by Paul Bakaus và đã được viết lại hoàn toàn, với một số lỗi được sửa và một số tính năng mới (như hỗ trợ phông chữ web và hình ảnh) được thêm vào.
Cài đặt
NPM
npm install dom-to-image
Sau đó tải
/* in ES 6 */
import domtoimage from 'dom-to-image';
/* in ES 5 */
var domtoimage = require('dom-to-image');
Bower
bower install dom-to-image
Bao gồm src/dom-to-image.js hoặc dist/dom-to-image.min.js trong trang của bạn và nó sẽ làm cho biến domtoimage có sẵn trong phạm vi toàn cục.
<script src="path/to/dom-to-image.min.js" />
<script>
domtoimage.toPng(node)
//...
</script>
Sử dụng
Tất cả các hàm cấp độ cao đều chấp nhận nút DOM và các tùy chọn hiển thị, và trả về các promise, được thực hiện với các URL dữ liệu tương ứng.
Lấy một URL dữ liệu mã hóa base64 của hình ảnh PNG và hiển thị ngay:
var node = document.getElementById('my-node');
domtoimage.toPng(node)
.then(function (dataUrl) {
var img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
Lấy một blob hình ảnh PNG và tải xuống nó (sử dụng FileSaver, ví dụ):
domtoimage.toBlob(document.getElementById('my-node'))
.then(function (blob) {
window.saveAs(blob, 'my-node.png');
});
Lưu và tải xuống một hình ảnh JPEG nén:
domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
.then(function (dataUrl) {
var link = document.createElement('a');
link.download = 'my-image-name.jpeg';
link.href = dataUrl;
link.click();
});
Lấy một URL dữ liệu SVG, nhưng loại bỏ tất cả các phần tử <i>:
function filter (node) {
return (node.tagName !== 'i');
}
domtoimage.toSvg(document.getElementById('my-node'), {filter: filter})
.then(function (dataUrl) {
/* do something */
});
Lấy dữ liệu pixel thô như một Uint8Array với mỗi 4 phần tử mảng đại diện cho dữ liệu RGBA của một pixel:
var node = document.getElementById('my-node');
domtoimage.toPixelData(node)
.then(function (pixels) {
for (var y = 0; y < node.scrollHeight; ++y) {
for (var x = 0; x < node.scrollWidth; ++x) {
pixelAtXYOffset = (4 * y * node.scrollHeight) + (4 * x);
/* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */
pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
}
}
});
Tất cả các hàm dưới_impl_ không phải là giao diện lập trình ứng dụng công khai và chỉ được hiển thị cho kiểm tra đơn vị.
Tùy chọn hiển thị
Bộ lọc
Một hàm nhận nút DOM làm đối số. Nên trả về true nếu nút đã truyền nên được bao gồm trong đầu ra (loại trừ nút đồng nghĩa với việc loại trừ cả các con của nó). Không được gọi trên nút gốc.
bgcolor
Một giá trị chuỗi cho màu nền, bất kỳ giá trị màu CSS hợp lệ nào.
height, width
Chiều cao và chiều rộng theo đơn vị pixel được áp dụng cho nút trước khi vẽ.
style
Một đối tượng có các thuộc tính sẽ được sao chép vào kiểu của nút trước khi vẽ. Bạn có thể muốn kiểm tra this reference để biết tên JavaScript của các thuộc tính CSS.
quality
Một số nằm giữa 0 và 1 thể hiện chất lượng hình ảnh (ví dụ: 0.92 => 92%) của hình ảnh JPEG. Mặc định là 1.0 (100%)
cacheBust
Đặt thành true để thêm thời gian hiện tại dưới dạng chuỗi truy vấn vào các yêu cầu URL để kích hoạt cache busting. Mặc định là false
imagePlaceholder
Một URL dữ liệu cho hình ảnh thay thế sẽ được sử dụng khi việc lấy hình ảnh thất bại. Mặc định là không xác định và sẽ gây ra lỗi trên hình ảnh thất bại
Trình duyệt
Nó đã được kiểm tra trên Chrome và Firefox mới nhất (lần lượt là 49 và 45 vào thời điểm viết), với Chrome hoạt động hiệu quả hơn đáng kể trên các cây DOM lớn, có thể do hỗ trợ SVG hiệu suất cao hơn và việc nó hỗ trợ thuộc tính CSSStyleDeclaration.cssText.
Internet Explorer không được hỗ trợ (và cũng sẽ không được hỗ trợ), vì nó không hỗ trợ thẻ_< foreignObject>_ của SVG
Safari is not supported , vì nó sử dụng mô hình bảo mật nghiêm ngặt hơn trên thẻ_< foreignObject_ >. Giải pháp tạm thời đề xuất là sử dụng _toSvg_ và vẽ trên máy chủ. `
Phụ thuộc
Nguồn
Hiện chỉ có thư viện tiêu chuẩn được sử dụng, nhưng hãy đảm bảo trình duyệt của bạn hỗ trợ:
- Promise
- Thẻ
<foreignObject>của SVG
Kiểm thử
Quan trọng nhất, các kiểm thử phụ thuộc vào:
js-imagediff, để so sánh hình ảnh đã vẽ và hình ảnh kiểm soát
ocrad.js, cho những phần mà bạn không thể so sánh hình ảnh (do sự khác biệt trong việc vẽ trình duyệt) và chỉ có thể kiểm tra xem văn bản đã được vẽ hay chưa
Cách hoạt động
Có thể có một ngày nào đó (hoặc có thể đã tồn tại?) một cách đơn giản và tiêu chuẩn để xuất phần của HTML thành hình ảnh (và sau đó, tập lệnh này chỉ có thể phục vụ như một bằng chứng cho tất cả những khả năng tôi đã phải vượt qua để thực hiện điều rất rõ ràng đó) nhưng cho đến nay tôi chưa tìm thấy cách đó.
Thư viện này sử dụng một tính năng của SVG cho phép chứa nội dung HTML tùy ý bên trong thẻ <foreignObject>. Vì vậy, để vẽ nút DOM đó cho bạn, các bước sau được thực hiện:
Sao chép nút DOM gốc theo đệ quy
Tính toán kiểu cho nút và từng nút con và sao chép nó vào bản sao tương ứng
- và đừng quên tái tạo các yếu tố giả tạo, vì chúng không được sao chép theo bất kỳ cách nào, tất nhiên
Nhúng phông chữ web
Tìm tất cả các khai báo @font-face có thể đại diện cho phông chữ web
Phân tích các URL tệp, tải xuống các tệp tương ứng
Mã hóa base64 và nhúng nội dung dưới dạng URL data:
Ghép các quy tắc CSS đã xử lý lại và đặt chúng vào một phần tử <style> duy nhất, sau đó gắn nó vào bản sao
Nhúng hình ảnh
Nhúng các URL hình ảnh vào các phần tử <img>
Nhúng các hình ảnh được sử dụng trong thuộc tính CSS background, tương tự như phông chữ
Serialize nút đã sao chép thành XML
Bao XML vào thẻ <foreignObject>, sau đó vào SVG, sau đó tạo nó thành URL dữ liệu
Tuỳ chọn, để có nội dung PNG hoặc dữ liệu pixel thô dưới dạng Uint8Array, tạo một phần tử Hình ảnh với SVG làm nguồn và vẽ nó trên một bảng vẽ ngoài màn hình, mà bạn cũng đã tạo, sau đó đọc nội dung từ bảng vẽ
Hoàn tất!
Cần lưu ý những điều sau
nếu nút DOM mà bạn muốn vẽ bao gồm một phần tử <canvas> với cái gì đó đã được vẽ trên đó, điều này nên được xử lý tốt, trừ khi phần tử canvas là tainted – trong trường hợp này, việc vẽ sẽ khá khó khăn.
vào thời điểm viết, Firefox gặp vấn đề với một số bảng kiểu bên ngoài (xem vấn đề #13). Trong trường hợp như vậy, lỗi sẽ được bắt và ghi vào nhật ký.
Chi tiết Tải xuống:
Tác giả: tsayen
Mã nguồn: https://github.com/tsayen/dom-to-image
Giấy phép: View license
