在提交表单之前减少javascript客户端的图像大小

在客户端阅读后，我试图缩小图像的大小，javascript代码如下，我在这里遇到两个问题 1） 图像预览未显示在img id“img上载”上 2） 通过表单提交“reader.readAsDataURL（input.files[0]）提交的文件不是缩小的文件

我确实尝试更改代码，将读取器移动到图像onload中，然后传递e.target.files[0]，但这也不起作用

请告知我如何调整大小，然后通过表单提交发送到我的后端

function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();  

                reader.onload = function (e) {
                        $('#img-upload').attr('src', e.target.result);
                        img.onload = function () {
                            var MAX_WIDTH = 100;
                            var MAX_HEIGHT = 100;
                            var width = img.width;
                            var height = img.height;

                            if (width > height) {
                               if (width > MAX_WIDTH) {
                                  height *= MAX_WIDTH / width;
                                  width = MAX_WIDTH;
                               }
                            } else {
                               if (height > MAX_HEIGHT) {
                                  width *= MAX_HEIGHT / height;
                                  height = MAX_HEIGHT;
                               }
                            }

                            var canvas = document.createElement("canvas");
                            canvas.width = width;
                            canvas.height = height;
                            canvas.getContext("2d").drawImage(this, 0, 0, width, height);

                            img.src = e.target.result;
                            $('#img-upload').append(img);
                        }  

                }
                reader.readAsDataURL(input.files[0]);

            }
        }

---

您的代码正在创建对

img.onload

因此

img.src=e.target.result语句

除此之外，您不会从画布读取调整大小的图像

你可以用下面的方法来做

canvas.toDataURL（'image/png'）

片段


var img=$（'#img upload'）[0]；
var show=$（'#show'）[0]；
函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
调试器；
$（'#img upload'）.attr（'src'，e.target.result）；
img.onload=函数（）{
var MAX_WIDTH=100；
var最大高度=100；
变量宽度=img.width；
var高度=img高度；
如果（宽度>高度）{
如果（宽度>最大宽度）{
高度*=最大宽度/宽度；
宽度=最大宽度；
}
}否则{
如果（高度>最大高度）{
宽度*=最大高度/高度；
高度=最大高度；
}
}
var canvas=document.createElement（“canvas”）；
画布宽度=宽度；
canvas.height=高度；
canvas.getContext（“2d”）.drawImage（这个，0，0，宽度，高度）；
//导致代码中出现无限循环
//img.src=e.target.result；
//从画布获取已调整大小的图像的dataURL
show.src=canvas.toDataURL（'image/png'）；
}
}
reader.readAsDataURL（input.files[0]）；
}
}

您的
img
变量点是什么to@Kaiido还有另一个赋值给
img.src=e.target.result内部加载的
img
检查问题中的代码。我已经在我的解决方案中删除了这部分代码。呵呵！你说得对，抱歉。我在发现第一个错误时停止分析。。。他在本来应该是图像的东西上附加了一个意象。@NadirLaskar有个问题。原始图像的深度为24位，但调整大小的图像的深度为42位，所以调整大小的图像大小等于原始图像。如何保持原始图像的位深度？