Hay varias formas de hacer esto.
Si desarrolla su aplicación web con Adobe Flash, entonces es bastante simple. Use Actionscript 3 para su aplicación. Crea un clip de película principal. Permitir al usuario importar imágenes usando la función FileReference.browse (). cada vez que el usuario importe una imagen, cree un clip de película dentro del elemento principal principal, luego permita el uso para mover los clips de película secundarios. Cuando todo esté hecho, exporte el clip de película principal principal utilizando
PNGEncoder.encode () función.
Ejemplo:
Importar imágenes:
- ¿Por qué alguien hizo clic en cada página de mi sitio web?
- Tengo una aplicación web en PHP y Angularjs. ¿Debo reemplazar el PHP con Node.js?
- ¿Cuáles son mis opciones para crear una pequeña aplicación web con la pila tecnológica más simple?
- Cómo escribir una aplicación web en 'C'
- ¿Qué tan fácil / difícil es desarrollar una aplicación nativa de su aplicación web (Ruby on Rails)?
archivo nuevo = nueva FileReference (); newfile.addEventListener (Event.SELECT, onFileSelected);
newfile.addEventListener (Event.CANCEL, onCancel); newfile.addEventListener (IOErrorEvent.IO_ERROR, onIOError); newfile.addEventListener (SecurityErrorEvent.SECURITY_ERROR, onSecurityError);
trace (“abbiamo instanziato un searchForFiles”);
var textTypeFilter: FileFilter = new FileFilter (“Archivos de imagen (* .png, * .jpg, * tif)”, “* .png; * .jpg; * tif”);
newfile.browse ([textTypeFilter]);
Exportando Imágenes:
var b: BitmapData = nuevo BitmapData (640, 480, falso, 0xffffffff); b.draw (padre principal);
var ba: ByteArray = PNGEncoder.encode (b);
Luego, puede hacer que el usuario guarde inmediatamente la imagen en un archivo, utilizando el método de guardar FileReference.
Otra forma es con Javascript:
Use Html y css para crear una posición div y controlar su movimiento usando javascript o jquery.
Igual que Flash. Cree un div primario, y cada vez que el usuario importe la imagen, cree un div dentro del div primario con un posicionamiento absoluto y el índice z correspondiente. Cuando finalmente todo esté listo, expórtelo usando objetos SVG externos.
Ejemplo:
Para importar imágenes puedes usar php. Si está utilizando php, primero debe cargar los archivos al servidor antes de acceder a ellos mediante javascript
Importar imágenes usando PHP
<? php
$ base64 = “”;
$ css = “”;
$ etiqueta = “”;
if (isset ($ _ ARCHIVOS [‘f’] [‘nombre’])) {
$ archivo = rand (0, 10000000). $ _ ARCHIVOS [‘f’] [‘nombre’];
if (move_uploaded_file ($ _ ARCHIVOS [‘f’] [‘tmp_name’], $ archivo)) {
if ($ fp = fopen ($ archivo, “rb”, 0))
{
$ imagen = fread ($ fp, tamaño de archivo ($ archivo));
fclose ($ fp);
// base64 codifica los datos binarios y luego los divide
// en trozos según la semántica RFC 2045
$ base64 = base64_encode ($ imagen);
$ tag = ‘‘;
$ css = ‘url (datos: imagen / jpg; base64,’. str_replace (“\ n”, “”, $ base64). ‘); ‘;
}
}
}
?>
El código CSS:
El código HTML:
Para exportar imagen
var lienzo = document.getElementById (“lienzo”);
var ctx = canvas.getContext (“2d”);
var data = “data: image / svg + xml,” + “” + ” “+ document.getElementById (‘ a ‘). innerHTML +” “+” “;
var img = nueva imagen ();
img.src = datos;
img.onload = function () {ctx.drawImage (img, 0, 0); }
