Image compression in himl uiwebview format

Question

I have a simple html form with input image like:

    ...
    <form action="new.php" method="POST" enctype="multipart/form-data">
        <input type="text" name="text" placeholder="text"><br><br>
        <input type="file" name="file" accept="image/*;capture=camera"><br><br>
        <input type="submit" value="Submit">
    </form>
    ...

In an iOS application I implemented UIWebView, this webview loads the html provided earlier.

In this form, I can add text and a file (the image in this case), but what I want to do is pre-process the image if the image is large, and then call a method that returns a smaller image.

I tried intercepting the request with -webView:shouldStartLoadWithRequest:navigationType:and changing the NSData from the request body / bodyStream, but it seems too confusing.

I also tried using javascriptObjc to call custom methods using custom URI:

function selectFile() { 
    window.location = "testapp://selectFile";
}

And part of the application:

-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    NSURL *url = request.URL;
    if ([[url scheme] isEqualToString:@"testapp"]) {
        [self openCustomFile];
        return NO;
    }
    return YES;
}

, , , UIImage, , , UIWebView, , .

, UIWebView?

Answer 1

JavaScript canvas / . - :

<form id="form">
    <input type="file" id="imageFile"/>
    <input type="submit" value="Submit"/>
</form>
<script type="text/javascript">
    document.getElementById('imageFile').addEventListener('change', resize);

    function resize(e) {
        var canvas = document.createElement('canvas');
        canvas.width = 200;
        canvas.height = 200;
        var ctx = canvas.getContext('2d');
        var img = new Image;
        img.src = URL.createObjectURL(e.target.files[0]);
        img.onload = function() {
            //convert image to canvas
            ctx.drawImage(img, 0, 0);
            var dataURL = canvas.toDataURL('image/jpeg', 0.5),
            blob = dataURItoBlob(dataURL),
            fd = new FormData(document.getElementById('form'));
            fd.append("canvasImage", blob);
            //remove imageFile
            var imageFile = document.getElementById('imageFile');
            document.getElementById('form').removeChild(imageFile);
        }
    }
</script>