如何在上传客户端之前使用 jquery 或 javascript 将图像数据 Url 转换为 [目标文件]答案

【问题标题】：how to convert image dataUrl into [objec file] using jquery or javascript before upload for client side如何在上传客户端之前使用 jquery 或 javascript 将图像数据 Url 转换为 [目标文件]
【发布时间】：2014-05-17 13:26:39
【问题描述】：

我正在尝试使用 canvasResize() 调整图像文件的大小，然后它将文件对象转换为 dataUrl 图像大小（57x57）。我需要在服务器中上传大小为（57x57）的图像。任何将dataUrl图像转换为文件对象（[对象文件]）的想法请帮助我。

<html>
  <head>
   <script src="jquery.js"></script>
   <script>
   function submit(){ 
     var fileData = $('#Image').get(0).files[0];
     alert(fileData);// look like ([object file]);

     canvasResize(fileData, {
      width: 57,
      height: 57,
      crop: false,
      quality: 80,
      //rotate: 90,
      callback: function(data, width, height) {
        console.log("source: "+data)
      }
     }
   }
   </script>
  </head>
  <body>
     <input type="file" id="Image" onClick="javascript:submit();"/>
  </body>
</html>

【问题讨论】：

标签： javascript jquery angularjs cordova

【解决方案1】：

首先，使用将图像文件绘制到 57x57 画布中，然后使用以下代码将 dataurl 转换为 blob 和 ajax 发送。

function readFileAsDataURL(blob, callback) {
    var a = new FileReader();
    a.onload = function(e) {callback(e.target.result);};
    a.readAsDataURL(blob);
}
function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

var fileObject = $('#Image')[0].files[0];
readFileAsDataURL(fileObject, function (dataurl){
    var canvas = $('<canvas width=57 height=57></canvas>')[0];
    var img = new Image();
    img.onload = function (){
        canvas.drawImage(img,0,0,57,57);
        var dataurl = canvas.toDataURL('image/jpeg',0.8);
        //var dataurl = canvas.toDataURL('image/png');  //if you need png
        var blob = dataURLtoBlob(dataurl);
        var fd = new FormData();
        fd.append("myFile", blob, "thumb.jpg");
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/', true);
        xhr.onload = function(){
            alert('upload complete');
        };
        xhr.send(fd);
    };
    img.src = dataurl;
});

【讨论】：