输入捕获文件减少和转换问题

Posted 2023-03-05

【中文标题】输入捕获文件减少和转换问题

【英文标题】：input capture file reduce and convert issue

【发布时间】：2021-10-03 23:47:53

【问题描述】：

我尝试从相机（Samsung Tab s7）捕获 html5 输入，然后调整大小（我的主要目标是减小图像大小），然后通过我的控制器上传发布方法。但是当我上传时，我的文件识别出 .bin 并像这样保存。我无法保存 jpeg。我该如何解决？

HTML：

 <input type="file" id="captureImageInput" style="display:none;" accept="image/*" capture>

JS：

const fileInput = document.getElementById('captureImageInput');
 fileInput.addEventListener('change', e => 
    if (e.target.files.length == 0) 
            // No file captured, ignore
            return;
        
    else
        var imageFile = e.target.files[0];
        //--resize image START

        var canvas = document.createElement("canvas");
        var img1 = document.createElement("img");
        img1.setAttribute('src', imageFile); 
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img1, 0, 0);

        var MAX_WIDTH = 800;
        var MAX_HEIGHT = 600;
        var width = img1.width;
        var height = img1.height;

        if (width > height) 
            if (width > MAX_WIDTH) 
                height *= MAX_WIDTH / width;
                width = MAX_WIDTH;
            
        
        else if (width == 0 && height == 0)
        
            width = MAX_WIDTH;
            height = MAX_HEIGHT;
         
        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(img1, 0, 0, width, height);

        var dataurl = canvas.toDataURL("image/jpeg");

        var blobBin = atob(dataurl.split(',')[1]);
        var array = [];
        for (var i = 0; i < blobBin.length; i++) 
            array.push(blobBin.charCodeAt(i));
        
        var resizedFileBlob = new Blob([new Uint8Array(array)],  type: 'image/jpeg' );
   
        //--resize image END
        
         var fullFileName = serialNo + "-" + stockNo;

         var fileImage = new File([resizedFileBlob], fullFileName);

         var myFormData = new FormData();
         myFormData.append('FormFile', fileImage);

          $.ajax(
          //POST OPERATION TO CONTROLLER
          );

     

  );

控制器端：

 [HttpPost]
 public JsonResult SavePhysicalPath(FileModel myFormData) 
  
   //update physical path operatıons..
 

文件模型类：

 public class FileModel
    
        public string FileFolderPath  get; set; 
        public string Files  get; set; 
        public IFormFile[] FormFile  get; set; 
    

【参考方案1】：

根据您的代码，我认为问题与您使用此行 var fileImage = new File([resizedFileBlob], fullFileName); 创建了一个新文件有关。

我建议你可以去掉这行，直接使用resizedFileBlob 作为参数传递给后端。

我已经创建了一个如下的测试演示，你可以参考一下。

Js：

<script type="text/javascript">

    $(document).ready(function () 
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var img = new Image();

        img.onload = function () 

            // set size proportional to image
            canvas.height = canvas.width * (img.height / img.width);

            // step 1 - resize to 50%
            var oc = document.createElement('canvas'),
                octx = oc.getContext('2d');

            oc.width = img.width * 0.5;
            oc.height = img.height * 0.5;
            octx.drawImage(img, 0, 0, oc.width, oc.height);

            // step 2
            octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);

            // step 3, resize to final size
            ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
                0, 0, canvas.width, canvas.height);




        
        img.src = "https://i.imgur.com/SHo6Fub.jpg";

        var cav = document.getElementById("canvas");
        const file = dataURLtoBlob(cav.toDataURL());
        var fileImage = new File([file], "test");
        const fd = new FormData;

        fd.append('image', fileImage);

        $.ajax(
            type: 'POST',
            url: '/api/Foo',
            data: fd,
            processData: false,
            contentType: false
        );

    );


    function dataURLtoBlob(dataURL) 
        let array, binary, i, len;
        binary = atob(dataURL.split(',')[1]);
        array = [];
        i = 0;
        len = binary.length;
        while (i < len) 
            array.push(binary.charCodeAt(i));
            i++;
        
        return new Blob([new Uint8Array(array)], 
            type: 'image/png'
        );
    ;

</script>

查看：

<img src="https://i.imgur.com/SHo6Fub.jpg"  >
<canvas id="canvas" width=300></canvas>

结果：