AngularJS Live Example

HTML

<script src="code.jquery.com/jquery-2.1.4.min.js"></script>
<div ng-app="HelloApp">
    <!--relative url-->
    <img-preview image="../img/[email protected]"></img-preview>
    <img-preview image="https://www.google.gr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"></img-preview>
    <img-preview image="https://s.yimg.com/rz/l/yahoo_en-US_f_p_142x37.png"></img-preview>
</div>

CSS

body {
    background:#009688;
}

JavaScript

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;
        }
    }
}]);
angular.module('HelloApp', ['components']);