AngularJS file upload from ngThumb directive (with angular-file-upload)
Since the uploader is working fine already and you're able to save the images into the database, all you need to do is to show the uploaded images as thumbnails on a canvas.
That can be done using some jQuery like this:
// source of a large image - replace this with the URL of the uploaded image (served from the database)var IMAGE_SRC = "http://cdn-media-1.lifehack.org/wp-content/files/2014/09/activities-on-the-beach.jpg";// set the height for the thumbnail - your uploader currently has 100var height = 100;function drawImage() { // create a new Image object var img = new Image(); // set up the onLoad handler on the image object to draw the thumbnail into the canvas img.onload = function() { // calculate the thumbnail width for the fixed height above, respecting the image aspect ratio var width = this.width / this.height * height; // set the dimensions on the canvas $("canvas").attr({ width: width, height: height }); // draw the image from the loaded image object $("canvas")[0].getContext("2d").drawImage(img, 0, 0, width, height); }; // set the source of the image object to the URL of the uploaded image (served from the database) img.src = IMAGE_SRC;}// Do all of this when the button is clicked$("button").click(drawImage);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button>Load image into Canvas</button><br /><br /><canvas></canvas>The same code could also be converted into another angular directive - something like <uploaded-image></uploaded-image>.
Writing down a simple directive to preview the returned images is quite easy. More or less is the a simplified version of the ngThumb directive you have provided.
angular.module('components', []) .directive('imgPreview', [function () { return { restrict: 'E', template: '<canvas/>', replace: true, link: function (scope, element, attrs) { var myCanvas = element[0]; var ctx = myCanvas.getContext('2d'); var img = new Image; img.onerror = function () { throw new Error("Image can't be loaded"); } img.onload = function () { myCanvas.width = img.width; myCanvas.height = img.height; ctx.drawImage(img, 0, 0); // Or at whatever offset you like }; img.src = attrs.image; } }}]);
// source of a large image - replace this with the URL of the uploaded image (served from the database)var IMAGE_SRC = "http://cdn-media-1.lifehack.org/wp-content/files/2014/09/activities-on-the-beach.jpg";// set the height for the thumbnail - your uploader currently has 100var height = 100;function drawImage() { // create a new Image object var img = new Image(); // set up the onLoad handler on the image object to draw the thumbnail into the canvas img.onload = function() { // calculate the thumbnail width for the fixed height above, respecting the image aspect ratio var width = this.width / this.height * height; // set the dimensions on the canvas $("canvas").attr({ width: width, height: height }); // draw the image from the loaded image object $("canvas")[0].getContext("2d").drawImage(img, 0, 0, width, height); }; // set the source of the image object to the URL of the uploaded image (served from the database) img.src = IMAGE_SRC;}// Do all of this when the button is clicked$("button").click(drawImage);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button>Load image into Canvas</button><br /><br /><canvas></canvas>