图像压缩的uiwebview html表单

Image compression on uiwebview html form

本文关键字：表单 html uiwebview 图像压缩      更新时间：2023-09-26

我有一个简单的html表单，输入类型为image:

    ...
    <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>
    ...

在一个iOS应用中，我实现了一个UIWebView，这个webview加载了之前提供的html。

在这种形式下，我可以添加一个文本和一个文件(在这种情况下是一个图像)，但我想做的是预处理图像，如果图像太大，然后调用一个方法返回一个较小的图像。

我试图拦截-webView:shouldStartLoadWithRequest:navigationType:的请求，并从请求体/bodyStream修改NSData，但它似乎太混乱了。

我还尝试使用javascript使用自定义URI调用本机对象方法:

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

应用程序部分:

-(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形式?

在JavaScript中，您可以将图像文件呈现为画布元素，然后将画布转换为可上载的调整大小/压缩图像。像这样的代码应该可以工作:

<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>
相关文章：