Usando capturas de pantalla de JavaScript, me gustaría recomendar dos componentes de código abierto aquí: uno es Canvas2Image, que puede programar las imágenes PNG/JPEG/BMP de dibujo y programación de lona; Pero tenerlo solo no es suficiente. Necesitamos tomar capturas de pantalla de cualquier DOM (al menos la gran mayoría), lo que requiere HTML2Canvas, que puede convertir el objeto DOM en un objeto de lona. Combinando las funciones de las dos, puede llevar la captura de pantalla DOM en la página a imágenes PNG o JPEG, lo cual es muy genial.
Canvas2image
Su principio es usar el objeto de lienzo HTML5 para proporcionar la API Todataurl ():
La copia del código es la siguiente:
var strdatauri = ocanvas.todataurl ();
// Devuelve "Datos: Imagen/Png; Base64, ivborw0kggoaaaaansuheugaaaamgaaadicayaaAct ..."
El resultado está codificado por Base64 (de hecho, la imagen también se puede escribir en la página de esta manera en forma de una cadena), por lo que también necesitamos una LIB codificada Base64.
Sin embargo, en la actualidad hay muchos defectos. Por ejemplo, Opera y Safari solo admiten PNG, mientras que Firefox es mucho mejor de apoyo.
Hay dos formas de escribir imágenes en la página. Una es generar un objeto de imagen para escribir en la página DOM Tree, que también es un mejor método de apoyo:
La copia del código es la siguiente:
// Devuelve un elemento <img> que contiene la imagen PNG convertida
var oimgpng = Canvas2Image.Saveaspng (Ocanvas, true);
Pero si realiza una función de captura de pantalla JavaScript, es posible que desee abrir automáticamente el cuadro de diálogo "Guardar" para guardar el archivo después de la captura de pantalla:
La copia del código es la siguiente:
Canvas2Image.Saveaspng (Ocanvas);
// le pedirá al usuario que guarde la imagen como PNG.
Llamar a este método generará una secuencia de datos con MIMETYPE "Image/Octet-Stream" al navegador, pero el cuadro de diálogo "Guardar" no puede reconocer el nombre de sufijo apropiado de la imagen. El archivo guardado predeterminado se llama "xxx.part" en Firefox. Esta es una pena, pero parece que no hay buena solución.
html2canvas
Actúa sobre el proceso de carga DOM, recopila la información y luego dibuja la imagen de lienzo. En otras palabras, en realidad no corta el árbol DOM mostrado en una imagen de lienzo, sino que vuelve a dibujar una imagen de lienzo basada en el árbol DOM. Por lo tanto, muchos estilos CSS no se pueden identificar con precisión y no se pueden reflejar con precisión en la figura.
Hay muchas otras restricciones, como:
● JavaScript debe ser del mismo dominio. Para situaciones de dominio cruzado, debe usar un servidor proxy (hay parámetros en la API que se puede especificar), y lo mismo es cierto para la imagen;
● El árbol DOM en el marco no puede dibujarse con precisión;
● Debido a que desea dibujar un diagrama de lienzo, los navegadores como IE8 necesitan usar bibliotecas de terceros como FlashCanvas.
Esta página puede probar el efecto de usarlo en capturas de pantalla en cada sitio web, y el efecto es bastante bueno:
Ejemplos de uso de API:
La copia del código es la siguiente:
html2canvas (
[DOM1, DOM2],
{
Registro: falso,
Usecors: falso,
Proxy: falso,
Onrendered: function (Canvas) {
// el lienzo es el objeto de lona dibujado
}
}
);
Para este tipo de biblioteca de clase relativamente nicho, la documentación es muy pobre, incluida la definición de la API, que requiere leer el código fuente y se escribe claramente en el código.
Además, también hay un complemento jQuery en el paquete de descarga de este sitio, que ha encapsulado esta API y puede ignorarse.