javascript - canvas.toDataUrl 返回空， Canvas 大小不为零

Question

我正在用 html5 编写需要在手机上运行的应用程序， 这个应用程序将图像从手机上传到我公司的服务器。 现在它在 Android 和计算机上工作，在 Iphone 上只有当我在前置摄像头拍照时它才工作，如果我从后置摄像头获取照片，我会得到空数据。

我创建了一个InputElement类型文件， 输入元素的 onChange 事件，调用函数 inputFile_onChange 获取 ElementEvent el:

    var file = el.target.files[0];
    var reader = new FileReader();
    reader.onloadend = (function(theFile) {return function(e) {
    $('#uploadImage').attr('src',e.target.result);
    $('#uploadImage').css('display','none');
    $($('#uploadImage')[0]).one('load',function(){
    var cvs = document.createElement('canvas');
    $image = $('#uploadImage')[0];
    var savingCanvas = document.createElement('canvas');
    savingCanvas.width = $image.naturalWidth;
    savingCanvas.height = $image.naturalHeight;
    var savingCanvasCtx = savingCanvas.getContext('2d');
    FileUploadApp._globals.drawImage(savingCanvasCtx, $image, 0, 0,    
    savingCanvas.width,savingCanvas.height);
    var newImageData = savingCanvas.toDataURL('image/jpeg', 0.2);
    }).each(function() {if(this.complete) $(this).load();});
     };
    })(file);
    reader.readAsDataURL(file);

我在 newImageData 创建并获取“data:”之后发出警报，当我在网上寻找答案时，我发现如果 Canvas 尺寸为 0，我会得到这个，但我也打印尺寸 - 宽度和高度以及两者其中很大 >1000

我很高兴获得一些帮助。

Answer 1

我发现了问题， 当 Canvas 很大时，函数 canvas.toDataURL 不会返回任何内容， 我将 Canvas 缩小到 1000 像素，问题就解决了