CamanJS - Mobile - Blank Canvas

Question

I am having problems running the CamanJS script on mobile devices, i.e. iPad and iPhone's Safari / Chrome, and I've been trying to resolve it for days.

The test script is very simple: 1) Accepts browser file selection of image 2) Gets the image source using FileData, then drawing it into a canvas, then instantiate a Caman("#sample") object 3) Run some filter (either within onLoad of that image, or manually by clicking a button)

It works perfectly fine on all desktop browsers and the filters are also successfully applied, but when I try it on mobile devices like iOS Safari, the moment I try to instantiate the Caman object, my existing canvas #sample goes blank and reverts to the original canvas default background color, with no image loaded at all. I've tried instantiating the Caman object before image is drawn on canvas, image onLoad, or on demand after the canvas image is successfully drawn, but the end result is still the same - the canvas goes blank.

Below is my sample code, can someone please advise? Thank you for your kind assistance.

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

Answer 1

I had the same problem: worked on Chrome and Safari on my Mac, but did not work on Chrome or Safari on the iPhone 5s running iOS7. I solved by adding the data-caman-hidpi-disabled attribute to my canvas tag.

Try this:

<canvas id="sample" width=300 height=300 style="background-color: #aaaaaa;" data-caman-hidpi-disabled="true"></canvas>

According to the CamanJS website:

If a HiDPI display is detected, CamanJS will automatically switch to the HiDPI version if available unless you force disable it with the data-caman-hidpi-disabled attribute.

http://camanjs.com/guides/#BasicUsage