El uso de html2canvas para implementar capturas de pantalla del navegador debe implementarse en un entorno de servidor.
efectohtml2canvas puede tomar capturas de pantalla en el lado del navegador a través de JS puro, pero es necesario mejorar la precisión de las capturas de pantalla y algunos CSS no se pueden reconocer, por lo que el estilo de pantalla original no se puede presentar perfectamente en el lienzo.
/*No es posible omitir el desbordamiento de varias líneas, solo se puede ocultar*/ .book_inf{ posición: relativo; desbordamiento: oculto; texto-desbordamiento: puntos suspensivos; -webkit-box; : 2; - webkit-caja-orientación: vertical; Navegadores compatibles /*Parámetros: * #screenshots El ID del elemento de la captura de pantalla requerido, la función que se ejecutará después de tomar la captura de pantalla, * color de fondo del elemento de configuración backgroundColor * lienzo es el último lienzo devuelto después de tomar la captura de pantalla */function screenshotsImg(){ html2canvas (document.querySelector( #screenshots),{ backgroundColor: 'transparent',//Establece el fondo para que sea transparente}).then(canvas => { canvasTurnImg(canvas) //Método de conversión del formato de imagen guardada}); Elementos de configuración disponibles| Nombre del parámetro | tipo | valor predeterminado | describir |
|---|---|---|---|
| permitir contaminación | booleano | FALSO | Si se debe permitir que las imágenes de origen cruzado manchen el lienzo --- permitir el origen cruzado |
| fondo | cadena | #fff | Color de fondo del lienzo, si no se especifica ninguno en DOM. Establecer indefinido para transparente---color de fondo del lienzo, si no se establece el blanco predeterminado, esto es una trampa, lo cambié a backgroundColor. |
| altura | número | nulo | Defina la altura del lienzo en píxeles. Si es nulo, se representa con la altura completa de la ventana.---configuración de la altura del lienzo. |
| cartaRepresentación | booleano | FALSO | Si se debe representar cada letra por separado. Necesario si se utiliza el espaciado entre letras. ---Útil cuando se establece el espaciado entre letras. |
| explotación florestal | booleano | FALSO | Ya sea para registrar eventos en la consola.---Información de salida en console.log() |
| apoderado | cadena | indefinido | URL del proxy que se utilizará para cargar imágenes de orígenes cruzados. Si se deja vacío, las imágenes de orígenes cruzados no se cargarán.---Dirección de proxy. |
| prueba de contaminación | booleano | verdadero | Si se debe probar cada imagen si contamina el lienzo antes de dibujarlas---si se debe probar la imagen antes de renderizarla |
| se acabó el tiempo | número | 0 | Tiempo de espera para cargar imágenes, en milisegundos Si lo establece en 0, no habrá tiempo de espera.---Retraso en la carga de imágenes, el retraso predeterminado es 0, en milisegundos. |
| ancho | número | nulo | Defina el ancho del lienzo en píxeles. Si es nulo, se representa con el ancho completo de la ventana.---ancho del lienzo. |
| utilizar CORS | booleano | FALSO | Si se debe intentar cargar imágenes de orígenes cruzados como CORS servido, antes de volver al proxy: proxy de orígenes cruzados |
1. Extraiga metadatos de imágenes directamente desde el lienzo
// Exportar la imagen a formato png var type = 'png'; var imgData = canvas.toDataURL(type);
2. Cambie el tipo mime a image/octet-stream para forzar que el navegador descargue directamente.
/** * Obtener mimeType * @param {String} escriba el antiguo tipo mime * @return el nuevo tipo mime */var _fixType = function(type) { type = type.toLowerCase().replace(/jpg/i , 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0]; return 'image/' + r;}; datos, reemplace el tipo mimeimgData = imgData.replace(_fixType(type),'image/octet-stream');3. Descargue la imagen a local
/** * Guardar archivos localmente * @param {String} datos Datos de imagen que se guardarán localmente * @param {String} nombre de archivo nombre de archivo */var saveFile = function(data, filename){ var save_link = document.createElementNS ('http ://www.w3.org/1999/xhtml', 'a'); save_link.href = datos; save_link.download = nombre de archivo = document.createEvent('MouseEvents'); event.initMouseEvent('clic', verdadero, falso, ventana, 0, 0, 0, 0, 0, falso, falso, falso, falso, 0, nulo); event);}; // nombre del archivo descargado var filename = 'baidufe_' + (new Date()).getTime() + '.' descargarguardarArchivo(imgData,nombre de archivo);Caso
Caso
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.