Hướng dẫn html-to-image github - html-to-image github

html-to-image

Tạo ra một hình ảnh từ một nút DOM bằng cách sử dụng Canvas và SVG HTML5.

Fork từ Dom-to-Image với mã có thể duy trì hơn và một số tính năng mới.

Cài đặt

npm install --save html-to-image

Cách sử dụng

/* 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');

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

• TOPNG
• tosvg
• tojpeg
• Toblob
• Tocanvas
• Topixeldata

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

TOPNG

tosvg

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

tojpeg

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

tosvg

tojpeg

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

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

tojpeg

Toblob

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

Tocanvas

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

Topixeldata

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

Topixeldata

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

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

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

import React, { useCallback, useRef } from 'react';
import { toPng } from 'html-to-image';

const App: React.FC = () => {
  const ref = useRef<HTMLDivElement>(null)

  const onButtonClick = useCallback(() => {
    if (ref.current === null) {
      return
    }

    toPng(ref.current, { cacheBust: true, })
      .then((dataUrl) => {
        const link = document.createElement('a')
        link.download = 'my-image-name.png'
        link.href = dataUrl
        link.click()
      })
      .catch((err) => {
        console.log(err)
      })
  }, [ref])

  return (
    <>
      <div ref={ref}>
      {/* DOM nodes you want to convert to PNG */}
      </div>
      <button onClick={onButtonClick}>Click me</button>
    </>
  )
}

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

Nhận URL dữ liệu SVG, nhưng lọc ra tất cả các yếu 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');5:

/* 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');

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

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

/* 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');

Nhận một htmlcanvaselement và hiển thị nó ngay lập tứ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');

Nhận 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:

Phản ứng

Tùy chọn

lọc

Một chức năng lấy nút dom làm đối số. Nên trả về true nếu nút được truyền nên được bao gồm trong đầu ra. Không bao gồm nút có nghĩa là loại trừ trẻ em là tốt.

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

hoặc

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

màu nền

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 các pixel được áp dụng cho nút trước khi kết xuất.

Canvaswidth, Canvasheight

Cho phép mở rộng kích thước của Canva bao gồm các phần tử bên trong với một 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ó thuộc tính được sao chép theo kiểu của nút trước khi kết xuất. Bạn có thể muốn kiểm tra tham chiếu này cho tên JavaScript của các thuộc tính CSS.

phẩm chất

Phong cách

Một đối tượng có thuộc tính được sao chép theo kiểu của nút trước khi kết xuất. Bạn có thể muốn kiểm tra tham chiếu này cho 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); });0 (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); });1)

bộ đệm

Được đặ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 để bậ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);
  });

/* 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');

Bao gồm các điều khoản

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

ImagePlaceholder

/* 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');

URL dữ liệu cho hình ảnh trì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 khu vực trống cho hình ảnh thất bại.

Phong cách

Một đối tượng có thuộc tính được sao chép theo kiểu của nút trước khi kết xuất. Bạn có thể muốn kiểm tra tham chiếu này cho 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); });0 (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); });1)

bộ đệm

• Được đặ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 để bậ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);
    });

  2

Bao gồm các điều khoản

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

ImagePlaceholder

URL dữ liệu cho hình ảnh trì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 khu vực trống cho hình ảnh thất bại.

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');
  });

1. Sao chép nút dom ban đầu đệ quy
2. Tính kiểu cho nút và từng nút phụ 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ả, vì chúng không được nhân bản theo bất kỳ cách nào, tất nhiên
3. Nhúng phông chữ web
   • Tìm tất cả các khai báo

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

     6 có thể đại diện cho phông chữ web
   • URL tệp Parse, tải xuống các tệp tương ứng
   • Nội dung Base64-Endu và nội tuyến dưới dạng DataURLS
   • Concatenate tất cả các quy tắc CSS đã xử lý và đặt chúng vào một yếu tố

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

     7, sau đó gắn nó vào bản sao
4. Nhúng hình ảnh
   • URL hình ảnh nhúng trong các yếu tố

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

     8
   • Hình ảnh nội tuyến được sử dụng trong thuộc tính

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

     9 CSS, theo cách tương tự như phông chữ
5. Tuần tự hóa nút nhân bản thành XML
6. Bọc XML vào thẻ

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

   0, sau đó vào SVG, sau đó biến nó thành URL dữ liệu
7. Tùy chọn, để lấy 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à hiển thị nó trên một khung vẽ ngoài màn hình, mà bạn cũng đã tạo, sau đó đọc nội dung từ Canvas
8. Done!

Những điều cần chú ý

• Nếu nút DOM bạn muốn kết xuất bao gồm một phần tử

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

  1 với một cái gì đó được vẽ trên đó, thì nó sẽ được xử lý tốt, trừ khi vải bị vấy bẩn - trong trường hợp này, kết xuất sẽ không thành công.
• Kết xuất sẽ thất bại trên DOM khổng lồ do giới hạn Datauri khác nhau.

Đóng góp

Xin vui lòng cho chúng tôi biết làm thế nào chúng tôi có thể giúp đỡ. Kiểm tra các vấn đề cho báo cáo lỗi hoặc đề xuất trước.

Để trở thành người đóng góp, xin vui lòng làm theo hướng dẫn đóng góp của chúng tôi.

Giấy phép

Các kịch bản và tài liệu trong dự án này được phát hành theo giấy phép MIT