meltingice / CamanJS

Javascript HTML5 (Ca)nvas (Man)ipulation

Home Page:http://camanjs.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Filter work very slow on mobile in 4.1.1

confile opened this issue · comments

I compared Caman 3.3.0 with Caman 4.1.1 and it turns out that the filter does work better on the old version. When the image is bigger that 100 x 100 px then 4.1.1 does not work.

Here is a JSFiddle of what I did: http://jsfiddle.net/confile/7Luh9y75/

var stage = new Kinetic.Stage({
    container: 'container',
    width: 640,
    height: 640
});
var layer = new Kinetic.Layer();
stage.add(layer);

// create an offscreen canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");

// load the star.png
var img = new Image();
img.onload = start;
img.crossOrigin = "anonymous";
img.src = "https://dl.dropboxusercontent.com/u/47067729/Foto%2014.11.14%2000%2007%2046.jpg";

// when star.png is loaded...
function start() {
    var tmpWidth = Math.floor(img.width /2);
    var w = Math.min(tmpWidth, 640);
    var h = img.height * w / img.width;


    w = 640;
    h = 640;

    // draw the star image to the offscreen canvas
    canvas.width = w;
    canvas.height = h;
    ctx.drawImage(img, 0, 0, w, h);

    // create a new Kinetic.Image
    // The image source is the offscreen canvas 
    var image1 = new Kinetic.Image({
        x: 0,
        y: 0,
        image: canvas,
        draggable: true
    });
    layer.add(image1);
    layer.draw();

}

// lomo the canvas
// then redraw the kinetic.layer to display the lomo'ed canvas 
$("#myButton").click(function () {
    Caman(canvas, function () {
        this.lomo().render(function () {
            layer.draw();
        });
    });
});