Làm cách nào để chuyển đổi HTML thành hình ảnh?

Tất cả các chức năng cấp cao nhất đều chấp nhận nút DOM và các tùy chọn kết xuất, đồng thời trả về một lời hứa được thực hiện với dataURL tương ứng

Đi với các ví dụ sau

đếnPng

Nhận URL dữ liệu được mã hóa base64 của hình ảnh PNG và hiển thị nó ngay lập tức

var node = document.getElementById('my-node');

htmlToImage.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);
  });

Nhận URL dữ liệu được mã hóa base64 của hình ảnh PNG và tải xuống (sử dụng tải xuống)

htmlToImage.toPng(document.getElementById('my-node'))
  .then(function (dataUrl) {
    download(dataUrl, 'my-node.png');
  });

toSvg

Nhận URL dữ liệu SVG, nhưng lọc ra tất cả các phần tử

/* ES6 */
import * as htmlToImage from 'html-to-image';
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';

/* ES5 */
var htmlToImage = require('html-to-image');

function filter (node) {
  return (node.tagName !== 'i');
}

htmlToImage.toSvg(document.getElementById('my-node'), { filter: filter })
  .then(function (dataUrl) {
    /* do something */
  });

sang JPG

Lưu và tải xuống hình ảnh JPEG đã nén

htmlToImage.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();
  });

toBlob

Nhận một đốm hình ảnh PNG và tải xuống (sử dụng FileSaver)

htmlToImage.toBlob(document.getElementById('my-node'))
  .then(function (blob) {
    if (window.saveAs) {
      window.saveAs(blob, 'my-node.png');
    } else {
     FileSaver.saveAs(blob, 'my-node.png');
   }
  });

toCanvas

Nhận một HTMLCanvasElement và hiển thị nó ngay lập tức

htmlToImage.toCanvas(document.getElementById('my-node'))
  .then(function (canvas) {
    document.body.appendChild(canvas);
  });

toPixelData

Lấy dữ liệu pixel thô dưới dạng Uint8Array với mỗi 4 phần tử mảng đại diện cho dữ liệu RGBA của pixel

var node = document.getElementById('my-node');

htmlToImage.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);
      }
    }
  });

Phản ứng

________số 8_______

Tùy chọn

lọc

/* ES6 */
import * as htmlToImage from 'html-to-image';
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';

/* ES5 */
var htmlToImage = require('html-to-image');

Một hàm lấy nút DOM làm đối số. Nên trả về true nếu nút đã qua phải được đưa vào đầu ra. Loại trừ nút có nghĩa là loại trừ cả nút con

Bạn có thể thêm bộ lọc vào mọi chức năng hình ảnh. Ví dụ,

/* ES6 */
import * as htmlToImage from 'html-to-image';
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';

/* ES5 */
var htmlToImage = require('html-to-image');

hoặc là

/* ES6 */
import * as htmlToImage from 'html-to-image';
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';

/* ES5 */
var htmlToImage = require('html-to-image');

Không được gọi trên nút gốc

màu nền

Một giá trị chuỗi cho màu nền, bất kỳ giá trị màu CSS hợp lệ nào

chiều rộng, chiều cao

Chiều rộng và chiều cao tính bằng pixel sẽ được áp dụng cho nút trước khi kết xuất

canvasWidth, canvasHeight

Cho phép chia tỷ lệ kích thước của canvas bao gồm các phần tử bên trong theo chiều rộng và chiều cao nhất định (tính bằng pixel)

Phong cách

Một đối tượng có các thuộc tính được sao chép sang kiểu của nút trước khi kết xuất. Bạn có thể muốn kiểm tra tài liệu tham khảo này để biết tên JavaScript của các thuộc tính CSS

phẩm chất

Một số giữa

/* ES6 */
import * as htmlToImage from 'html-to-image';
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';

/* ES5 */
var htmlToImage = require('html-to-image');

/* ES6 */
import * as htmlToImage from 'html-to-image';
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';

/* ES5 */
var htmlToImage = require('html-to-image');

/* ES6 */
import * as htmlToImage from 'html-to-image';
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';

/* ES5 */
var htmlToImage = require('html-to-image');

/* ES6 */
import * as htmlToImage from 'html-to-image';
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';

/* ES5 */
var htmlToImage = require('html-to-image');

Mặc định là

var node = document.getElementById('my-node');

htmlToImage.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);
  });

cacheBust

Đặt thành true để nối 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 nhằm bật tính năng chặn truy xuất bộ đệm

Mặc định là

var node = document.getElementById('my-node');

htmlToImage.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);
  });

bao gồmQueryParams

Đặt false để sử dụng tất cả URL làm khóa bộ đệm. Nếu giá trị có giá trị sai, nó sẽ loại trừ các tham số truy vấn khỏi URL được cung cấp

Mặc định là

var node = document.getElementById('my-node');

htmlToImage.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);
  });

giữ chỗ hình ảnh

URL dữ liệu cho hình ảnh giữ chỗ sẽ được sử dụng khi tìm nạp hình ảnh không thành công

Mặc định là một chuỗi trống và sẽ hiển thị các vùng trống cho hình ảnh bị lỗi

pixelRatio

Tỷ lệ pixel của hình ảnh được chụp. Mặc định sử dụng tỷ lệ pixel thực tế của thiết bị. Đặt

/* ES6 */
import * as htmlToImage from 'html-to-image';
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';

/* ES5 */
var htmlToImage = require('html-to-image');

/* ES6 */
import * as htmlToImage from 'html-to-image';
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';

/* ES5 */
var htmlToImage = require('html-to-image');

ưa thíchFontFormat

Định dạng cần thiết để nhúng phông chữ. Đây là một tối ưu hóa hữu ích khi nhà cung cấp phông chữ web chỉ định một số định dạng khác nhau cho phông chữ trong CSS, chẳng hạn

/* ES6 */
import * as htmlToImage from 'html-to-image';
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';

/* ES5 */
var htmlToImage = require('html-to-image');

Thay vì nhúng từng định dạng, tất cả các định dạng khác với định dạng được chỉ định sẽ bị loại bỏ. Nếu tùy chọn này không được chỉ định thì tất cả các định dạng sẽ được tải xuống và nhúng

phông chữEmbedCSS

Khi được cung cấp, thư viện sẽ bỏ qua quá trình phân tích cú pháp và nhúng URL webfont vào CSS, thay vào đó sử dụng giá trị này. Điều này hữu ích khi được kết hợp với

var node = document.getElementById('my-node');

htmlToImage.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);
  });

/* ES6 */
import * as htmlToImage from 'html-to-image';
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';

/* ES5 */
var htmlToImage = require('html-to-image');

bỏ qua AutoScale

Khi được cung cấp, thư viện sẽ bỏ qua quá trình nhân rộng các dom cực lớn vào đối tượng canvas. Bạn có thể bị mất các phần của hình ảnh nếu được đặt thành

var node = document.getElementById('my-node');

htmlToImage.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);
  });

Mặc định là

var node = document.getElementById('my-node');

htmlToImage.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);
  });

loại

Một chuỗi cho biết định dạng hình ảnh. Loại mặc định là image/png; . Khi được cung cấp, hàm toCanvas sẽ trả về một đốm màu khớp với loại và chất lượng hình ảnh đã cho

Mặc định là

var node = document.getElementById('my-node');

htmlToImage.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);
  });

trình duyệt

Hiện chỉ có lib tiêu chuẩn được sử dụng, nhưng hãy đảm bảo rằng trình duyệt của bạn hỗ trợ

• Lời hứa
• Thẻ SVG

  htmlToImage.toPng(document.getElementById('my-node'))
    .then(function (dataUrl) {
      download(dataUrl, 'my-node.png');
    });

  0

Nó đã được thử nghiệm trên Chrome, Firefox và Safari mới nhất (lần lượt là 49, 45 và 16 tại thời điểm viết bài), trong đó Chrome hoạt động tốt hơn đáng kể trên các cây DOM lớn, có thể là do hỗ trợ SVG hiệu quả hơn và thực tế là nó hỗ trợ thuộc tính

htmlToImage.toPng(document.getElementById('my-node'))
  .then(function (dataUrl) {
    download(dataUrl, 'my-node.png');
  });

Internet Explorer không (và sẽ không) được hỗ trợ vì nó không hỗ trợ thẻ SVG

htmlToImage.toPng(document.getElementById('my-node'))
  .then(function (dataUrl) {
    download(dataUrl, 'my-node.png');
  });

Làm thế nào nó hoạt động

Có thể một ngày nào đó tồn tại (hoặc có thể đã tồn tại?) một cách đơn giản và tiêu chuẩn để xuất các phần của HTML thành hình ảnh (và sau đó tập lệnh này chỉ có thể dùng làm bằng chứng cho tất cả các vòng mà tôi đã phải vượt qua để có được như vậy

Thư viện này sử dụng một tính năng của SVG cho phép có nội dung HTML tùy ý bên trong thẻ

htmlToImage.toPng(document.getElementById('my-node'))
  .then(function (dataUrl) {
    download(dataUrl, 'my-node.png');
  });