Javascript 上传前减小图像大小

在将图像上传到服务器之前，我正在尝试减少客户端的图像大小。我有下面的javascript代码来生成所选文件的缩小图像以供上传

function handleUpload(){
    var canvas = document.getElementById("canvas");
    var img = document.createElement("img");

    // from an input element
    var file = document.querySelector('input[type=file]').files[0];

    var reader = new FileReader();
    reader.onload = function() {
        img.src = reader.result
        createCanvas(canvas, img);//method that creates a reduced sized canvas
    }
    reader.readAsDataURL(file);
    var dataurl = canvas.toDataURL("image/jpg");
}

如何在JSF中将调整大小的图像文件上载到服务器。我有下面的JSF标记，它正在创建画布，但仍然将原始文件上传到服务器

<h:inputFile id="file" value="#{managedBean.uploadedFile}" onchange="handleUpload()"/>

附言：

---

Mojara 2.2

您可能需要在handleUpload函数末尾将dataurl设置为输入文件您可能需要在handleUpload函数末尾将dataurl设置为输入文件