相关疑难解决方法(0)

假设我在页面上有这个元素:

<input id="image-file" type="file" />

这将创建一个按钮,允许网页用户通过浏览器中的"文件打开..."对话框选择文件.

假设用户单击所述按钮,在对话框中选择一个文件,然后单击"确定"按钮关闭对话框.

选定的文件名现在存储在:

document.getElementById("image-file").value

现在,假设服务器在URL"/ upload/image"处理多部分POST.

如何将文件发送到"/ upload/image"？

另外,如何收听文件上传完成的通知？

数码相机照片通常以JPEG格式保存,并带有EXIF"方向"标签.要正确显示,需要根据设置的方向旋转/镜像图像,但浏览器会忽略渲染图像的信息.即使在大型商业网络应用程序中,对EXIF方向的支持也可能不稳定1.相同的源代码还提供 了JPEG可以具有的8种不同方向的精彩摘要:

样本图像可在4处获得.

问题是如何在客户端旋转/镜像图像,以便正确显示并在必要时进一步处理？

有JS库可用于解析EXIF数据,包括orientation属性2.Flickr在解析大图像时注意到了可能的性能问题,需要使用Web工作者3.

控制台工具可以正确地重新定向图像5.解决问题的PHP脚本可在6处获得

我想根据相机在JPEG EXIF图像数据中设置的原始旋转来旋转照片.诀窍是所有这一切都应该在浏览器中使用JavaScript和<canvas>.

JavaScript如何访问JPEG,本地文件API对象,本地<img>或远程<img>,EXIF数据来读取旋转信息？

服务器端的答案不对; 我正在寻找客户端解决方案.

Flutter Web 目前处于测试阶段，因此缺乏有关如何执行此操作的可用信息/资源。

我找不到任何与 web 兼容的 flutter 包来做到这一点。有小费吗？

这是我的代码：

uploadImage() async {
File file;
FileReader fileReader = FileReader();
InputElement uploadInput = FileUploadInputElement();
uploadInput.click();
uploadInput.onChange.listen((event) {
  file = uploadInput.files.first;
  fileReader.readAsDataUrl(file);
  fileReader.onLoadEnd.listen((event) {
    if (file.type == "image/jpg" || file.type == "image/jpeg" || file.type == "image/png") {
      String base64FileString = fileReader.result.toString().split(',')[1];

      //COMPRESS FILE HERE

      setState(() {
        userImgFile = file;
        userImageByteMemory = base64Decode(base64FileString);
      });
    } else {
      CustomAlerts().showErrorAlert(context, "Image Upload Error", "Please Upload a Valid Image");
    }
  });
});
}

我有一个问题，我正在 net core 中创建一个应用程序来上传孩子的信息，但是，主要问题是我拥有的所有图像都来自我的手机，你知道我们谈论的是每张图片 9-15 MB ，所以，我知道我不能告诉用户“有一个限制”，但是，我认为它没有用，所以，有一种方法可以减少图像的大小，从而降低质量吗？。

这是我的方法

班级

public IFormFile ImageFile { get; set; }

方法

if (vm.ImageFile != null && vm.ImageFile.Length > 0)
{
    var guid = Guid.NewGuid().ToString();
    var file = $"{guid}.jpg";

    path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot\\images\\Kids", file);

    using (var stream = new FileStream(path, FileMode.Create))
    {
        //var convertedImage = MagicSolutionGivenByTheAwsomeStackOverFlowCommunity
        await vm.ImageFile.CopyToAsync(stream);
    }

}

布局

<form asp-action="Create" enctype="multipart/form-data">
 <input type="hidden" asp-for="Imagen"/>
  <div class="col-sm-4">
   <label asp-for="Imagen" class="control-label"></label>
   <div>
    <input asp-for="ImageFile" class="form-control filestyle"
           type="file" data-classbutton="btn btn-secondary"
           data-classinput="form-control inline"
           data-icon="&lt;span class='fa fa-upload …

我正在使用 s3 上传图像文件。但每当我尝试使用 URL 以及从 s3 控制台下载时，都会下载图像文件。但是，图像查看器将看不到它。它只是显示不兼容的文件类型。

myS3Function.uploadFile(request.body.fileName, request.files.myFileData, "image_folder").then(filename => {
 //success
})

。

const AWS = require('aws-sdk');

const s3 = new AWS.S3({
 region: process.env.REGION
});

exports.uploadFile  = (filename, data, folderName) => {
return new Promise((resolve, reject) => {
    const params = {
        Bucket: process.env.AWS_S3_BUCKET, 
        Key: folderName+'/'+filename,
        Body: data.data,
        ACL:'public-read',
        ContentType: "image/jpeg"
    };
    s3.upload(params, function(s3Err, data) {
        if (s3Err) reject(s3Err)
        console.log(`File uploaded successfully at ${data.Location}`)
        resolve(`${data.Location}`)

    });
});
}

我现在使用邮递员上传文件作为表单数据。我可以正确地看到使用此代码上传的文本文件。那么为什么图像会出现这个问题呢？此外，图像和 pdf 实际文件大小也略有增加。

我使用 base64 发送/接收我的图像。我有一个 base64 字符串，我想将它压缩到我的大小。

例如我想将照片大小减少到 100kb。

是否可以？