Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/449.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/php/229.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Croppie插件不适用于iOS和Safari_Javascript_Php_Jquery_Croppie - Fatal编程技术网

Javascript Croppie插件不适用于iOS和Safari

Javascript Croppie插件不适用于iOS和Safari,javascript,php,jquery,croppie,Javascript,Php,Jquery,Croppie,我提到了这个 我正在使用,它在Android、Chrome和Mozilla上运行良好。但不在iOS和Safari上工作。如果我从iOS上传了一个图像,那么它会旋转90度。此外,该图像不会上载到Safari。 这是我的全部代码 HTML 请帮我修复。我找到了解决方案 enableExif需要exif.js,如文档中所述: 添加后,它在所有设备上都能正常工作。真的吗?在装有Safari的iPhone(iOS 14.4)上,甚至连官方的Croppie演示都无法运行。EXIF方向不应用于图像,它在从媒体

我提到了这个

我正在使用,它在Android、Chrome和Mozilla上运行良好。但不在iOS和Safari上工作。如果我从iOS上传了一个图像,那么它会旋转90度。此外,该图像不会上载到Safari。 这是我的全部代码

HTML

请帮我修复。

我找到了解决方案

enableExif
需要exif.js,如文档中所述:

添加后,它在所有设备上都能正常工作。

真的吗?在装有Safari的iPhone(iOS 14.4)上,甚至连官方的Croppie演示都无法运行。EXIF方向不应用于图像,它在从媒体库中选择后显示为旋转。我指的是上的“上传示例(与exif方向兼容)”
<div class="container">
    <div class="panel panel-default">
      <div class="panel-heading">Image Upluad</div>
      <div class="panel-body">
        <div class="row">
            <div class="col-md-4 text-center">
                <div id="upload-demo" style="width:350px"></div>
            </div>
            <div class="col-md-4" style="padding-top:30px;">
                <strong>Select Image:</strong>
                <br/>
                <input type="file" id="upload">
                <br/>
                <button class="btn btn-success upload-result">Upload Image</button>
            </div>
            <div class="col-md-4" style="">
                <div id="upload-demo-i" style="background:#e1e1e1;width:300px;padding:30px;height:300px;margin-top:30px"></div>
            </div>
        </div>
      </div>
    </div>
</div>
<script type="text/javascript">
$uploadCrop = $('#upload-demo').croppie({
    enableExif: true,
    viewport: {
        width: 200,
        height: 200,
        type: 'circle'
    },
    boundary: {
        width: 300,
        height: 300
    }
});
$('#upload').on('change', function () { 
    var reader = new FileReader();
    reader.onload = function (e) {
        $uploadCrop.croppie('bind', {
            url: e.target.result
        }).then(function(){
            console.log('jQuery bind complete');
        });
    }
    reader.readAsDataURL(this.files[0]);
});
$('.upload-result').on('click', function (ev) {
    $uploadCrop.croppie('result', {
        type: 'canvas',
        size: 'viewport'
    }).then(function (resp) {
        $.ajax({
            url: "/ajaxpro.php",
            type: "POST",
            data: {"image":resp},
            success: function (data) {
                html = '<img src="' + resp + '" />';
                $("#upload-demo-i").html(html);
            }
        });
    });
});
</script>
$data = $_POST['image']; list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data); $data = base64_decode($data);
$imageName = time().'.png'; file_put_contents('upload/'.$imageName, $data);
echo 'done';