在Angularjs中上传文件之前获取image dataUrl | ng-file-upload

Question

I'm resizing the image before upload it to the server using HTML5 Canvas.

Also I use Angular's module ng-file-upload .

Stack on getting dataUrl of resized image. Console returns data:,

What could be the problem here?

HTML

<input type="file" ngf-select ng-model="files">
<img ngf-src="files[0]">

JS

$scope.upload = function (files) {
    if (files && files.length==1) {
        var file = files[0];    

        var img = document.createElement("img");
        var canvas = document.createElement("canvas");
        var reader = new FileReader();
        reader.onload = function(e) {img.src = e.target.result};
        reader.readAsDataURL(file);

        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);

        var MAX_WIDTH = 200;
        var MAX_HEIGHT = 150;
        var width = img.width;
        var height = img.height;

        if (width > height) {
            if (width > MAX_WIDTH) {
                height *= MAX_WIDTH / width;
                width = MAX_WIDTH;
             }
        } else {
            if (height > MAX_HEIGHT) {
                width *= MAX_HEIGHT / height;
                height = MAX_HEIGHT;
             }
        }
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height);

        var dataurl = canvas.toDataURL("image/png");
        console.log( dataurl );
        ...

Answer 1

He had the same problem and solve it with:

 $scope.upload = function (files) { if (files && files.length==1) { var file = files[0]; var URL = window.URL || window.webkitURL; var srcTmp = URL.createObjectURL(file); var img = new Image(); img.onload = function() { alert(this.width + 'x' + this.height); } img.src = srcTmp;