Geek Answers Handbook

CamanJS - Mobile - Empty canvas

I am having problems running CamanJS script on mobile devices, i.e. iPad and iPhone are Safari / Chrome, and I have been trying to resolve it for several days.

The script test is very simple: 1) Accepts the image file selection in the browser 2) Gets the image source using FileData, then draws it onto the canvas, and then instantiates the Caman object ("# sample") 3) Run some filter (or inside onLoad this images, either manually by pressing the button)

It works fine on all desktop browsers, and filters are also successfully applied, but when I try to use it on mobile devices such as iOS Safari, the moment I try to instantiate the Caman object, my existing canvas #sample is empty and goes back to The default background color of the canvas, without loading the image at all. I tried to instantiate the Caman object before the image was drawn on the canvas, the onLoad image or on demand after the canvas image was successfully drawn, but the end result is the same - the canvas is empty.

Below is sample code, can anyone consult? Thanks for your kind help.

<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>
+4
1

: Chrome Safari Mac, Chrome Safari iPhone 5 iOS7. , data-caman-hidpi-disabled canvas.

:

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

- CamanJS:

HiDPI-, CamanJS HiDPI, , data-caman-hidpi-disabled.

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

+4

More articles:


All Articles