上传前减小图像大小

Question

我正在尝试在上传到服务器之前减少客户端的图像大小。我有以下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()"/>

PS：

Mojara 2.2