En primer lugar, el documento no se moverá ni se explicará como otros artículos. En cambio, está escrito para uso real en proyectos reales.
Tabla de contenido
prefacio
Hay varios métodos que se pueden encontrar en Internet, algunos usan capturas de pantalla de lienzo y capturas de pantalla de complementos. Aquí uso el complemento html2canvas para mostrar que es más fácil de usar. La siguiente es una explicación de las trampas que encontré en el uso real.
1. Instrucciones antes del uso
1. Primero, de acuerdo con la descripción en el documento, toma una captura de pantalla basada en los elementos dom que se muestran en la página.
2. Hay ciertas restricciones, no todos los estilos css son efectivos. Pero no se preocupe, la mayoría son compatibles. Este es un enlace para admitir oficialmente las propiedades css. Se adjunta una lista de las propiedades css admitidas.
3. El punto más importante es que las imágenes deben ser del mismo origen. Si la imagen es de dominio cruzado, hará que la imagen se pierda después de la captura de pantalla. También lo encontré. La solución se describirá a continuación.
2. El uso real del proyecto
1. Descripción del proyecto
1. El requisito del proyecto es generar un póster basado en el contenido que se muestra en la página y presionar prolongadamente para guardar la imagen
2. Se devuelve el póster que se muestra en la página api(hay un problema entre dominios)
2. Pasos para usar
1. La estructura principal de la página puede escribirla usted mismo, cada requisito es diferente
2. Instalación
npm install html2canvas
import html2canvas from 'html2canvas';
3. Uso
onMakePicture() {
//这是选择你要进行截屏的dom
const dom = this.$refs.picDom
html2canvas(dom).then(function (canvas) {
// console.log('canvas',canvas)
const link = document.createElement("img");
link.src = canvas.toDataURL();
link.style.width = "100%";
link.style.height = "100%";
link.style.position = "absolute";
link.style.top = "0";
link.style.left = "0";
dom.appendChild(link);
});
},
3. Problema de imagen entre dominios
1. Dado que apila imagen devuelta directamente por el usuario es una imagen en línea, debe ser multidominio, por lo que la solución concebible es convertir la imagen base64, y la base64imagen convertida se puede convertir desde el front-end o el back-end. Por supuesto, tengo que probarlo yo mismo. Puede ser multipartido o entre dominios. Al final, no tengo más remedio que pedirle a los compañeros de back-end que lo transfieran, y se puede mostrar normalmente.
4. Problema de estilo CSS
1. Usé la imagen devuelta por la interfaz background-imagepara configurarlo, por lo que no hay problema con la pantalla, pero descubrí que html2canvasno hubo ningún problema en la prueba en el navegador de la computadora cuando lo estaba usando, y la imagen se puede generar normalmente, pero después de probar en el teléfono móvil, encontré que no hay problema. Puede deberse a que la velocidad de procesamiento del teléfono móvil no es tan rápida como la de la computadora. Al atravesar domlos elementos, base64la cadena de la imagen es demasiado larga, por lo que es demasiado tarde para renderizarla, por lo que se pierde la imagen de fondo. , así que adivina la imgetiqueta y deja que domse cargue la imagen de fondo al cargar. .
Conocimientos adicionales:
1. La estructura de la página se carga primero, lo que le permite esperar más tarde css.
2. Es una imagen construida html2canvasal recorrer los elementos necesarios para generar capturas de pantalla .dom
por fin
Se adjunta un enlace al documento: la minería html2canvas
es genial por un tiempo, y la minería siempre lo es.
Indique si hay algún problema.
Bienvenido a venir a menudo si ayuda.