javascript - CamanJS - モバイル - 空白のキャンバス

Question

iPad や iPhone の Safari / Chrome などのモバイル デバイスで CamanJS スクリプトを実行する際に問題が発生し、何日も解決しようとしています。

テスト スクリプトは非常に単純です。1) ブラウザー ファイルで選択した画像を受け入れる 2) FileData を使用して画像ソースを取得し、それをキャンバスに描画してから、Caman("#sample") オブジェクトをインスタンス化します 3) フィルターを実行します (その画像の onLoad、またはボタンをクリックして手動で)

すべてのデスクトップ ブラウザーで問題なく動作し、フィルターも正常に適用されますが、iOS Safari などのモバイル デバイスで試してみると、Caman オブジェクトをインスタンス化しようとすると、既存のキャンバス #sample が空白になり、元の状態に戻ります。キャンバスのデフォルトの背景色で、画像はまったく読み込まれていません。イメージがキャンバスに描画される前、イメージ onLoad、またはキャンバス イメージが正常に描画された後にオンデマンドで Caman オブジェクトをインスタンス化しようとしましたが、最終結果は同じです - キャンバスが空白になります。

以下は私のサンプルコードです、誰かアドバイスしてもらえますか? 親切なお力添えありがとうございます。

<script>
var caman = null;

function handleUpload(evt) {
    var target = (evt.target) ? evt.target : evt.srcElement;
    var files = target.files; // FileList object
    var field = target.id;
    var curCount = target.id.replace(/\D+/, "");

    for (var i = 0, f; f = files[i]; i++) {
        var reader = new FileReader();
        reader.onload = (function(theFile) {
            return function(e) {
                renderImage(e.target.result);
            };
        })(f);

        reader.readAsDataURL(f);
    }
}

function renderImage(imagedata) {
    var canvas = document.getElementById("sample");
    var ctx = canvas.getContext("2d");

    // Render Preview
    var previewImage = new Image();
    previewImage.src = imagedata;
    previewImage.onload = function() {
    ctx.drawImage(previewImage, 0, 0, previewImage.width, previewImage.height);
        caman = Caman("#sample", function () { this.sunrise().render(); });
    };
}

function testProcess() {
    //caman = Caman("#sample", function () { this.sunrise().render(); }); 
    if (caman) { 
        caman.sunrise().render();
    }
}

</script>


<form>
<input id="photo" name="photo" value="" type=file size="30" maxlength="50">
</form>

<canvas id="sample" width=300 height=300 style="background-color: #aaaaaa;"></canvas>

<br><br><a href="javascript:void(0);" onClick="testProcess();">Test Process</a><br><br>

<script>
document.getElementById('photo').addEventListener('change', handleUpload, false);
</script>