Comentario: Este artículo le muestra cómo convertir la imagen en lienzo y cómo extraer una imagen. El código de muestra es el siguiente. Los amigos de esta necesidad pueden referirse a ello. Espero que te sea útil.
Js lienzo e imagen se convierten entre síDemo original: demo de conversión de imagen de Canvas JavaScript
En la conferencia de desarrollo web de Mozilla de la semana pasada, terminamos pasando la mayor parte del día discutiendo futuras aplicaciones del mercado de Mozilla. Instagram es la aplicación móvil más popular recientemente, vendida a Facebook por un precio de $ 1 mil millones.
No me importa ganar algo de dinero extra, así que decidí crear una aplicación de estilo Instagram (lo compartiré más tarde)
Este artículo le muestra cómo convertir la imagen en lienzo y cómo extraer una imagen.
Convertir la imagen en lienzo
Para convertir una imagen en lienzo (Artboard, Canvas), puede usar el método Drawimage del contexto del elemento de lona:
// Convertir la imagen al objeto Canvas
función convertimageTocanvas (imagen) {
// Crear un elemento DOM de lienzo y establecer su ancho y altura igual que la imagen
var lienvas = document.createElement ("Canvas");
Canvas.Width = Image.Width;
Canvas.Height = Image.Height;
// Las coordenadas (0,0) indican el dibujo desde aquí, que es equivalente a la compensación.
Canvas.getContext ("2d"). DrawImage (imagen, 0, 0);
retorno de lienzo;
}
Convertir el lienzo en imagen
Suponiendo que la imagen se haya procesado en lienzo, puede usar el siguiente método para convertir el lienzo en un objeto de imagen de imagen.
// extraer imagen del lienzo
función convertCanvastoimage (Canvas) {
// El nuevo objeto de imagen se puede entender como DOM
var imagen = nueva imagen ();
// Canvas.todataurl Devuelve una cadena de URL codificadas Base64. Por supuesto, el navegador en sí debe apoyarlo.
// especificar el formato PNG
image.src = Canvas.todataurl ("Image/Png");
imagen de retorno;
}
¡Oh! La conversión de imágenes de imágenes y lienzo es más fácil de lo que piensas. En el futuro, le demostraré diferentes tecnologías de procesamiento de imágenes. Creo que definitivamente ganarás mucho dinero con estas tecnologías en el futuro.