Question

我有以下表格：

<form style="margin:5px;" id="submit-image" method="post" action="/site/recognize" enctype="multipart/form-data">
<input name="photo" id="upload-image" type="file" accept="image/*;capture=camera" >
<input name="photo-resized" id="upload-image-resized" type="hidden">
</form>

然后我有以下javascript：

<script>
var myInput = document.getElementById('upload-image');

function sendPic() {
    //var file = myInput.files[0];

    // functionality to rezise image BEFORE upload needs to go here

// from an input element
var filesToUpload = document.getElementById("upload-image").files;
var file = filesToUpload[0];
console.log(file);
var canvas = document.createElement('canvas');


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

console.log(img); // This still outputs a proper image

var MAX_WIDTH = 1000;
var MAX_HEIGHT = 1000;
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");

var dataurl;

img.onload = function () {
canvas.getContext("2d").drawImage(img, 0, 0, width, height);
dataurl = canvas.toDataURL();
console.log(dataurl); // Somehow this STILL outputs an empty dataurl, need to find out why
};



document.getElementById('upload-image-resized').value= dataurl; 


    document.getElementById('submit-image').submit();
    var loader = document.getElementsByClassName('ui-loader');
    loader[0].style.display = "block";
    loader[0].style.opacity = 0.7;

}

myInput.addEventListener('change', sendPic, false);
</script>

正如你所看到的，我有几个console.log（）语句来帮助我理解出错的地方。我在那里发表评论说“//不知何故，这会输出一个空数据，需要找出原因”。这就是我迷路的地方。

我不明白为什么dataurl变量为空。它只包含“数据：”或类似内容。

任何帮助表示感谢。

HTML5 canvas javascript：toDataURL生成空dataurl

0 个答案: