Lienzo e imagen convertir el código de muestra entre sí

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.

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.