Maravillosa reseña
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
Anteriormente, desarrollé una plataforma de generación de GIF en mi tiempo libre. Los antecedentes de desarrollo específicos que también presenté en el artículo anterior para enseñarte una plataforma de producción de GIF que puede generar GIF de estilo vibrato. Continuemos implementándola hoy. La implementación de esta plataforma y la plataforma de animación gif será completamente implementada por medios front-end, por lo que encontrarás muchos complementos interesantes de front-end en el siguiente contenido. A continuación, echemos un vistazo a las principales funciones a implementar:
La interfaz pura se da cuenta de la carga y vista previa de imágenes
Clasificación de elementos con arrastre libre basada en react-beautiful-dnd
Utilice javascript para realizar la función de generar uuid
Utilice el protector de archivos para descargar archivos desde la interfaz
Utilice gif.js para generar animaciones gif basadas en imágenes
Método para controlar la velocidad de reproducción de la animación gif
texto
Aún de acuerdo con el estilo habitual del autor, antes de implementar la función, echemos un vistazo al efecto de vista previa después de la implementación:
Se puede ver en las representaciones que solo necesitamos cargar una secuencia de imágenes para generar dinámicamente animaciones gif, y hacer clic derecho para guardar los archivos gif. También podemos controlar la velocidad de reproducción y el orden de disposición de las animaciones para una configuración más flexible de las animaciones. Si quieres experimentarlo tú mismo, puedes ir directamente de las siguientes formas:
Dirección en línea: http://io.nainor.com/qt
1. Configuración de página básica
Antes de comenzar, primero debemos aclarar la estructura básica de la página. El autor se divide en la siguiente estructura: de la figura anterior, se divide en 3 áreas. Podemos usar cualquier componente de terceros con el que estemos familiarizados para lograrlo. El autor usa antd para desarrollar aquí. El diagrama del plan técnico es el siguiente: El
anterior es el objetivo de realización aproximado analizado por el autor, y también es un mapa de desarrollo de uso común por parte del autor. La orientación del objetivo sigue siendo muy útil para mejorar la eficiencia del desarrollo. El autor sugiere que también puede pensar primero antes de darse cuenta de requisitos comerciales más complejos. Esquema y luego código.
2. Realice la función de carga y vista previa de imágenes
Para el primer paso de la interfaz, creo que todos pueden darse cuenta. Ahora lo implementaremos paso a paso hasta la realización de la función. Primero realicemos la carga y la vista previa de la imagen. Como no usamos el servidor aquí, la vista previa de la imagen se realiza completamente mediante el método front-end, por lo que Necesitamos usar el objeto FileReader.
El objeto FileReader permite que una aplicación web lea de forma asincrónica el contenido de un archivo (o búfer de datos sin procesar) almacenado en la computadora del usuario. Utilice un objeto File o Blob para especificar el archivo o los datos que se leerán.
El objeto File puede ser un objeto FileList devuelto después de que el usuario selecciona un archivo en un elemento de entrada, o un objeto DataTransfer generado por una operación de arrastrar y soltar, o puede ser un resultado devuelto al ejecutar el método mozGetAsFile () en un HTMLCanvasElement. A continuación, echemos un vistazo a cómo usar el componente Upload de antd y FileReader para lograr una vista previa de la imagen. El código específico es el siguiente:
const uploadprops = useMemo(() => ({
name: 'file',
multiple: true,
listType:"picture-card",
onPreview: () => {},
showUploadList: false,
beforeUpload(file, fileList) {
// 解析并提取excel数据
let reader = new FileReader();
reader.onload = function(e) {
let url = e.target.result;
setImageList(prev => [...prev, {id: uuid(6, 16), url}])
};
reader.readAsDataURL(file);
}
}), []);
uploadprops es la configuración de propiedad que requiere el componente Upload. A través del código, podemos saber que interceptamos la imagen en la etapa beforeUpload, y convertimos el archivo leído en una dirección base64 a través de la API readAsDataURL del objeto FileReader, para que podamos mostrarlo de la siguiente manera En la foto:
<img src={item.url} id={item.id} alt=""/>
En el código, almacenamos los datos de la imagen en un objeto. El objeto incluye la identificación única y la URL generada por la función uuid. En cuanto a por qué se genera la identificación única, el autor lo presentará a continuación.
3. Utilice react-beautiful-dnd para realizar una clasificación de elementos sin arrastre
Después de estudiar H5-Dooring | un potente editor H5 de código abierto, encontrará que el módulo react-dnd es muy familiar, porque el editor de código abierto utiliza el componente drag y la transferencia de datos de componentes implementados por react-dnd. El autor encontró una biblioteca de arrastrar y soltar más interesante react-beautiful-dnd en la comunidad, que también puede lograr efectos de arrastrar y soltar inteligentes, elegantes y suaves. El caso básico es el siguiente: después de estudiar la biblioteca en profundidad, el autor descubrió que se puede usar directamente para implementar componentes de imagen. La función de arrastrar y ordenar, por lo que el autor usa directamente la biblioteca para encapsular nuestros componentes de imagen. Dado que el uso de la biblioteca tiene códigos de casos detallados, no lo presentaré en detalle aquí, solo necesito mencionar un punto para lograr la clasificación, Es necesario determinar la identificación única de cada elemento, así que aquí pienso en uuid, por lo que la estructura de datos de la matriz de la imagen renderizada puede ser tan larga como esta:
const imgList = [
{
id: uuid(6, 10),
url: '图片的base64位地址'
}
]
Para limitar el tamaño de carga de la imagen, también podemos limitar el tamaño de carga de la imagen en la etapa beforeUpload del componente Upload. Esto depende del uso. Hay muchas formas de implementar uuid. Aquí hay un método de implementación:
// 生成uuid
function uuid(len: number, radix: number) {
let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
let uuid = [],
i;
radix = radix || chars.length;
if (len) {
for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
} else {
let r;
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
uuid[14] = '4';
for (i = 0; i < 36; i++) {
if (!uuid[i]) {
r = 0 | (Math.random() * 16);
uuid[i] = chars[i === 19 ? (r & 0x3) | 0x8 : r];
}
}
}
return uuid.join('');
}
El efecto después de la implementación es el siguiente: En cuanto al método de eliminar la imagen, también es muy simple, solo use la identificación única de la imagen para eliminarla usando el método de ajuste de la matriz.
4. Cómo controlar la velocidad de reproducción de GIF
Podemos usar el componente deslizante para controlar la velocidad de reproducción de gif, y gif.js también proporciona una interfaz de velocidad, solo necesitamos calcular el valor de velocidad. Todos sabemos que cuanto más se desliza el deslizador, mayor es el valor y el correspondiente Cuanto mayor sea la velocidad, menor será el intervalo de tiempo, por lo que el efecto de visualización que diseñamos en la capa frontal es el siguiente: el valor máximo del control deslizante se establece en 20 y el valor mínimo es 1, en consecuencia, cuando el control deslizante se establece en el valor máximo, la velocidad de reproducción de gif es la máxima , El intervalo de permanencia de cada imagen es 0,1 s, cuando el control deslizante está en el valor mínimo de 1, la velocidad de reproducción del gif es la más pequeña y cada imagen permanece durante 2 s. De acuerdo con esta regla, obtenemos la siguiente regla:
El código específico es el siguiente:
const handleSpeed = (v) => {
let realSpeed = (20 - v + 1) / 10;
setSpeed(realSpeed)
}
Por supuesto, puede hacerlo de una manera más sencilla, y el componente deslizante también proporciona operaciones de valor inverso.
5. Genere una animación GIF basada en la secuencia de imágenes
La forma de generar gif basado en la secuencia de imágenes también es muy simple. Obtenemos las imágenes en el área de arrastre de imágenes en lotes, las ensamblamos en una matriz y las enviamos a gif.js. Veamos el efecto directamente:
6. Utilice el protector de archivos para descargar archivos desde la interfaz
Solo necesitamos pasar la imagen gif generada al módulo de ahorro de archivos y usar la API proporcionada por él para descargar el archivo. Esto también lo presentó el autor en el artículo anterior, aquí está el código directamente:
import { saveAs } from 'file-saver';
// resultImage为gif生成的gif图片对象
saveAs(resultImage, `${uuid(6, 10)}.gif`);
Al final
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.