uiwebview html表单上的图像压缩答案

【问题标题】：Image compression on uiwebview html formuiwebview html表单上的图像压缩
【发布时间】：2015-08-24 22:56:12
【问题描述】：

我有一个简单的 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 调用本机Objc 方法：

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 ios objective-c uiwebview uiimage

【解决方案1】：

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

【讨论】：