Question

我试图从输入字段调整图像大小。

目前我收到错误：Uncaught TypeError: Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'.

我并不确定一切都是如何完成的。我只是调整文件大小，然后继续表单处理吗？

代码：

    $( "input#item-images" ).change(function() {
        var file = this.files;

        jQuery.each( file, function( i, val ) {
            alert(i + val['name']);

            var file = val['name'];

            var img = document.createElement("img");
            var reader = new FileReader();
            reader.onload = function(e) {img.src = e.target.result}
            reader.readAsArrayBuffer(file);

            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0);

            var MAX_WIDTH = 800;
            var MAX_HEIGHT = 600;
            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;
                }
            }
            canvas.width = width;
            canvas.height = height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, width, height);

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

        });

        console.log(file);
    });

Answer 1

当您执行@Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/resources/**").addResourceLocations("/public-resources/"); }时，您正在将{File}对象的name属性分配给file变量，然后将该名称传递给var file = val['name'];中的readAsArrayBuffer。

要解决此问题，您可以替换此代码：

reader.readAsArrayBuffer(file);

有了这个：

    var file = this.files;

    jQuery.each( file, function( i, val ) {
        alert(i + val['name']);

        var file = val['name'];

但是，当您解决此问题时，会弹出下一个问题，即jQuery.each( this.files, function( i, file ) { alert(i + file['name']);未定义。我不知道你是否希望其余的代码可以工作，也许你在其他地方定义了canvas。

调整图像客户端的大小

1 个答案: