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

Question

我正在調整圖像的大小，然后使用HTML5 Canvas將其上傳到服務器。

我也使用Angular的模塊ng-file-upload 。

堆棧上獲取調整大小后的圖像的dataUrl。 控制台返回data:,

這可能是什么問題？

的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

他有同樣的問題，並通過以下方法解決：

 $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;