Javascript uiwebview html表单上的图像压缩

我有一个简单的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>
    ...

应用程序部分：

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

document.getElementById（'imageFile'）。addEventListener（'change'，resize）；
函数大小调整（e）{
var canvas=document.createElement（'canvas'）；
画布宽度=200；
画布高度=200；
var ctx=canvas.getContext（'2d'）；
var img=新图像；
img.src=URL.createObjectURL（e.target.files[0]）；
img.onload=函数（）{
//将图像转换为画布
ctx.drawImage（img，0,0）；
var dataURL=canvas.toDataURL（'image/jpeg'，0.5），
blob=dataURItoBlob（dataURL），
fd=新的FormData（document.getElementById（'form'）；
fd.append（“画布图像”，blob）；
//删除图像文件
var imageFile=document.getElementById（'imageFile'）；
document.getElementById（'form'）.removeChild（imageFile）；
}
}

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