Maravillosa reseña
El desarrollo de la interesante plataforma de animación gif (2)
Un editor visual para páginas h5 basado en React + Koa-Dooring
Resumen de los puntos de conocimiento básicos de TS y análisis de casos de proyectos reales
Prefacio
La función de captura de pantalla web también es un requisito muy común, especialmente en el campo de la educación en línea. Los carteles de WeChat y los carteles de eventos en nuestro círculo de amigos generalmente están diseñados por personal de operaciones / marketing a través de herramientas de diseño, pero cómo mapear mejor a usted mismo En el sistema de servicios, como la página H5, se implantan más capacidades interactivas y de recopilación de información.
A continuación, revisaré cómo generar carteles de página basados en páginas web con un clic e integrar esta capacidad en mi proyecto de código abierto H5-Dooring para empoderar al editor.
texto
Antes de implementar funciones específicas, echemos un vistazo a los efectos de implementación específicos:
A partir de la demostración, podemos ver que nuestro objetivo final es generar capturas de pantalla de las páginas H5 en el lado de la PC, por lo que pueden estar involucrados los siguientes problemas:
Cómo convertir páginas en imágenes
Cómo realizar la simulación del efecto H5 e interceptar la página H5 real
Primero podemos pensar en la realización de ideas, ¿cómo podemos transformarnos en imágenes basadas en dom? Esta tecnología también es un tema común, todos sabemos que se puede implementar con lienzo, el proceso general es el siguiente:
Si usamos el esquema de implementación nativo, generalmente tenemos que seguir los pasos anteriores. El segundo paso es el enlace clave y el paso más complicado. Necesitamos implementar manualmente el mapeo de dom a lienzo y finalmente convertirlo en un objeto de dibujo de lienzo estándar. Por supuesto, listo para usar También existen muchas librerías que pueden ayudarnos directamente a simplificar este paso, como html2canvas, dom-to-image A continuación resolveremos el primer problema.
Cómo convertir páginas en imágenes
En el proceso de investigación personal y uso de la biblioteca html2canvas, el autor encontró muchos problemas, como si aparecen% unidades en el estilo, o si hay algunos problemas con el fondo de la imagen, lo que hace que html2canvas no funcione bien y la representación se reduzca y sea más clara. Hay problemas, por lo que el autor no ha estudiado en profundidad por el momento (pero estos problemas se pueden resolver modificando la biblioteca en sí). Más tarde, el autor utilizó directamente dom-to-image y descubrió que es muy simple de usar, y casi no hay problemas mencionados anteriormente. Por lo tanto, el autor adoptó de manera decisiva dom-to-image. Después de leer el código fuente de la biblioteca, creo que la escritura también es muy elegante y fácil de entender. El desarrollo secundario no debería ser un gran problema en el período posterior. Podemos ver el uso básico de su sitio web oficial:
// 引入
import domtoimage from 'dom-to-image';
// 生成图片
domtoimage.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);
});
El uso también es muy simple y proporciona suficientes elementos de configuración para que configuremos de manera flexible.
El primer problema se resuelve de esta manera, pero el problema de las imágenes borrosas se encuentra durante el uso. También hay muchas soluciones en este Internet. Por ejemplo, primero acerca el zoom y aleja el zoom cuando se procesa en un lienzo y finalmente genera imágenes. Este es el autor No daré ejemplos uno por uno.
Cómo realizar la simulación del efecto H5 e interceptar la página H5 real
Debido a que las páginas H5 que diseñamos están todas completadas en el lado de la PC, si desea generar la imagen de vista previa H5, no es más que un tamaño de simulación local para renderizar. El plan específico es el siguiente:
Use iframe como contenedor de página H5 para generar capturas de pantalla
Limite directamente el ancho para generar una captura de pantalla en la página actual
Utilice el rastreador del servidor para simular el acceso del teléfono móvil para generar capturas de pantalla
Puedes probar todas las soluciones mencionadas anteriormente. El autor también ha abierto la aplicación del rastreador para resolver este problema antes. Si estás interesado, puedes estudiar y comprender. Obviamente, elegiremos la primera solución para implementarla, como en la demostración. El H5 en la ventana emergente que vimos se representa en realidad en el iframe: la idea de realización está ahí y el problema está bien comprendido. Solo necesitamos implementar la comunicación de mensajes entre la página principal y el iframe, como cuando se carga el iframe. Luego, notifique manualmente al iframe para que se intercepte a sí mismo. El código de implementación básico es el siguiente:
// 编辑器页面, 也就是父页面
// 定义截图子页面句柄函数
window.getFaceUrl = (url) => {
setFaceUrl(url)
setShowModalIframe(false)
}
// iframe页面, 也就是预览页面
const generateImg = (cb:any) => {
domtoimage.toBlob(refImgDom.current,
{
width,
height,
}
)
.then(function (blob:Blob) {
const formData = new FormData();
formData.append('file', blob, 'tpl.jpg');
req.post('/files/upload/free', formData).then((res:any) => {
cb && cb(res.url)
})
})
.catch(function (error:any) {
console.error('oops, something went wrong!', error);
});
}
// 触发父页面的方法,将图片传给父页面
generateImg((url:string) => {
parent.window.getFaceUrl(url);
})
Al final
El autor del tutorial anterior se ha integrado en H5-Dooring. Para algunas funciones interactivas más complejas, también se puede realizar mediante un diseño razonable. Puede explorar y estudiar usted mismo.
búsqueda de github: H5-Dooring
Si desea obtener más información sobre juegos H5, webpack, node, gulp, css3, javascript, nodeJS, visualización de datos de lienzo y otros conocimientos de front-end y combate real, bienvenido a estudiar y discutir juntos en "Interesting Frontend" para explorar juntos el límite de front-end.