前端js压缩图片后怎么把图片放回input中让表单提交的是压缩后的图片而不是原图

前端js压缩图片后怎么把图片放回input中让表单提交的是压缩后的图片而不是原图
部分代码:

$(function(){
        $(document).off('change',"input[type=file]").on('change',"input[type=file]",function (e){
            const imageFile = e.target.files[0]
            const imgUrl = URL.createObjectURL(imageFile)
            const imgEle = document.createElement('img')
            imgEle.src = imgUrl
            imgEle.onload = function () {
                const canvas = document.createElement('canvas')
                const ctx = canvas.getContext('2d')
                canvas.width = imgEle.width
                canvas.height = imgEle.height
                ctx.drawImage(imgEle, 0, 0)
                const datas= canvas.toDataURL('image/jpeg', 0.3)
                var arr = datas.split(','),
                    mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]),
                    n = bstr.length,
                    u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                const file = new File([u8arr], $("input[type=file]").name, {type: mime});
                file.lastModifiedDate = new Date();
                const arrayFiles=Arrays.from(e.target.files)
                arrayFiles.push(file);
                
            }
        });
    });

// 创建一个新的FormData对象
            const formData = new FormData();
            // 将压缩后的图片文件添加到FormData中
            formData.append('image', file);
            // 发送ajax请求
            $.ajax({
                url: 'your_upload_url',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    // 处理上传成功后的逻辑
                },
                error: function (xhr, status, error) {
                    // 处理上传失败后的逻辑
                }
            });

可以通过创建一个新的FormData对象，将压缩后的图片文件添加到其中，然后使用XMLHttpRequest对象将FormData对象发送到服务器。以下是示例代码：

$(function(){
    $(document).off('change',"input[type=file]").on('change',"input[type=file]",function (e){
        const imageFile = e.target.files[0]
        const imgUrl = URL.createObjectURL(imageFile)
        const imgEle = document.createElement('img')
        imgEle.src = imgUrl
        imgEle.onload = function () {
            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')
            canvas.width = imgEle.width
            canvas.height = imgEle.height
            ctx.drawImage(imgEle, 0, 0)
            const datas= canvas.toDataURL('image/jpeg', 0.3)
            var arr = datas.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            const compressedFile = new File([u8arr], $("input[type=file]").name, {type: mime});
            compressedFile.lastModifiedDate = new Date();
            const formData = new FormData();
            formData.append('image', compressedFile);
            const xhr = new XMLHttpRequest();
            xhr.open('POST', '/upload');
            xhr.send(formData);
        }
    });
});

在上面的代码中，我们创建了一个新的FormData对象，并将压缩后的图片文件添加到其中。然后，我们使用XMLHttpRequest对象将FormData对象发送到服务器。请注意，这里的URL应该替换为你的服务器端上传处理程序的URL。

你可以看下这个问题的回答https://ask.csdn.net/questions/325614
我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：【js工具函数】input框输入正负数字，限制大小，小数点位数，是否可以为0
除此之外, 这篇博客: 大神们怎么用js获取input里边内容的长度中的 插入链接与图片 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
链接: link.
图片:
带尺寸的图片:
居中的图片:
居中并且带尺寸的图片:
当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

以下回答由chatgpt基于相关博客总结生成:

如果你想将压缩后的图片放回到表单元素中，并确保在提交表单时提交的是压缩后的图片，而不是原图，可以按照以下步骤实现：

将图片设置为base64格式的字符串，可以使用canvas将图片压缩后获取base64格式的图片。具体可参考canvas相关知识。
将压缩后的图片放入到元素中，可以使用setAttribute方法将base64格式的字符串设置为源属性的值，例如：

var input = document.querySelector('input[type="file"]');
var file = input.files[0];
var reader = new FileReader();
reader.onloadend = function () {
  var base64String = reader.result.replace("data:", "").replace(/^.+,/, "");
  // 将base64格式的字符串设置为源属性的值
  input.setAttribute("src", "data:image/jpeg;base64," + base64String);
}
reader.readAsDataURL(file);

在表单提交前获取元素中的base64格式的字符串并将其转为Blob类型的数据。可以使用canvas的toBlob方法或者使用Blob构造函数进行转换，例如：

var input = document.querySelector('input[type="file"]');
var file = input.files[0];
var reader = new FileReader();
reader.onloadend = function () {
  // 将base64格式的字符串设置为源属性的值
  input.setAttribute("src", "data:image/jpeg;base64," + reader.result.replace("data:", "").replace(/^.+,/, ""));
  var base64String = reader.result.replace("data:", "").replace(/^.+,/, "");
  // 将base64格式的字符串转为Blob类型的数据
  var binaryString = window.atob(base64String);
  var binaryLen = binaryString.length;
  var bytes = new Uint8Array(binaryLen);
  for (var i = 0; i < binaryLen; i++) {
    var ascii = binaryString.charCodeAt(i);
    bytes[i] = ascii;
  }
  var blob = new Blob([bytes], { type: "image/jpeg" });
  // 将转换后的Blob数据设置为表单的提交数据
  var formData = new FormData();
  formData.append("image", blob);
  // 使用ajax提交表单
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "url");
  xhr.send(formData);
}
reader.readAsDataURL(file);

其中，在提交表单时，可以使用ajax将表单数据提交到服务器，也可以将表单包装成FormData类型并通过XMLHttpRequest的send方法提交到服务器。具体可根据实际需求选择相应的方法。

出处：https://blog.csdn.net/weixin_41905229/article/details/108859296

还可以选择的方案是把文件提交到后台后，在后台自动压缩。这样更灵活。