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

Question

我尝试从相机（Samsung Tab s7）捕获 Html5 输入，然后调整大小（我的主要目标是减小图像大小），然后通过我的控制器上传 post 方法。但是当我上传时，我的文件识别出 .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; }
    }

标签： javascriptc#asp.net-corefile-uploadhtml-input

Answer 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" width="300" height="234">
<canvas id="canvas" width=300></canvas>

结果：