La situación es: tengo que dibujar una imagen en un lienzo de forma dinámica. El código es:

html:

 <canvas id="canvas" width="500px" height="300px"></canvas> <input type="file" id="file-input">

jquery:

 $(function() { $('#file-input').change(function(e) { var file = e.target.files[0], imageType = /image.*/; if (!file.type.match(imageType)) return; var reader = new FileReader(); reader.onload = fileOnload; reader.readAsDataURL(file); }); function fileOnload(e) { var $img = $('<img>', { src: e.target.result }); var canvas = $('#canvas')[0]; var context = canvas.getContext('2d'); $img.load(function() { context.drawImage(this, 0, 0); }); } });

Añade la imagen a la esquina superior izquierda. Pero ahora podría necesitar cambiar la imagen a otra posición arrastrando y soltando. Además, necesito cambiar el tamaño de la imagen de manera similar. Para eso, necesito seleccionar la imagen (obteniendo una referencia a esa imagen) con un clic del mouse. Podría haberlo hecho comprobando si las coordenadas del clic del mouse se superponen con cualquier área de la imagen. Pero si hay una gran cantidad de imágenes, esta forma será ineficiente (almacenar imágenes en una matriz y verificar con cada una de ellas). ¿Hay alguna manera más eficiente?

PD: estoy tratando de crear un diseñador de interfaz de usuario que genere una interfaz de usuario arrastrando y soltando los elementos en angular. Acabo de empezar con el elemento de imagen.

Edición 1: podría usar el lienzo Fabric.js en su lugar. Pero aún me gustaría saber si esto también se puede hacer en un lienzo nativo.