I have two img-touch-canvas in different browsers displaying the same image (I've synchronized it through websockets). Aslo, both img-touch-canvas are using the canvas to display their contents (by the same I mean the same size). When the user zooms/moves the image on one client, I want to sync this in the other one. I am doing so with:

gesturableImg.position.x = data.position_x;
gesturableImg.position.y = data.position_y;
gesturableImg.scale.x = data.position_x;
gesturableImg.scale.y = data.position_y;

gesturableImg.animate();

The problem is that the canvas become fully grey and I lost everything I had on it. Is this the right way to sync to img-touch-canvas?

When using toDataURL as here: setInterval(function(){document.getElementById("img_canvas").toDataURL()}, 1000); makes imgtouchcanvas irresponsive in the millisecond that toDataURL is called.

If the user is touching the canvas (zooming, moving) in the exact time that toDataURL is called then it has to stop touching and start touching again to regain control.

When I load more than one image with this Library it causes the iPhone's CPU to over-clock. Is there a way to clear the global object or null the canvas?

I'm wondering if you have any suggestions for me- I'm rendering an image on a 360x360 square and displaying it on an iphone. However, the images look quite low quality- I assume because of the scaling functions being used.

Do you suggest any changes to the library or approaches that will let me retain a high quality image while using your cropping library?

Hi,

How can I save the dataURL from the canvas after using the library?

我在下面打了个console,就一直在运行 console.info(this,888);

ImgTouchCanvas.prototype = {
animate: function() {
//set scale such as image cover all the canvas
if(!this.init) {
if(this.imgTexture.width) {
var scaleRatio = null;
if(this.canvas.clientWidth > this.canvas.clientHeight) {
scaleRatio = this.canvas.clientWidth / this.imgTexture.width;
}
else {
scaleRatio = this.canvas.clientHeight / this.imgTexture.height;
}

                this.scale.x = scaleRatio;
                this.scale.y = scaleRatio;
                this.init = true;
            }
        }

        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        console.info(this,888);

It seems that img-touch-canvas fills the canvas based on the image's width. If the canvas has a fixed size then some blank space is left on the bottom of the canvas. The problem is that zooming the image until it fills the whole canvas makes the image flickers around.

Perhaps zooming the image in the initialization to fit the whole canvas would be one way to avoid that. What should I do to get the image zoomed to fit the canva's area in the initialization?

Hi, I'm having some issues wile adding rotation to the canvas image. This is the code I'm using but after I rotate the image on a mobile device, it freezes after the rotation happens. What would be the best way to implement that into your script?

On the mobile device I'm presenting two buttons to rotate the image (right or left)

var canvas = document.getElementById('canvas'),
context = canvas.getContext("2d"),
image = "temp.png";

function drawRotated(degrees){
context.clearRect(0, 0, canvas.width, canvas.height);

// save the unrotated context of the canvas so we can restore it later
// the alternative is to untranslate & unrotate after drawing
context.save();

// move to the center of the canvas
context.translate(canvas.width / 2, canvas.height / 2);

// rotate the canvas to the specified degrees
context.rotate(degrees * Math.PI / 180);

// draw the image
// since the context is rotated, the image will be rotated also
context.drawImage(image,-image.width / 2, -image.width / 2);

// we’re done with the rotating so restore the unrotated context
context.restore();
}

thanks for your help in advance!
Alvin.

I can't draw on top of img-touch-canvas for some reason. Here is the code: http://pastebin.com/qbTV4Njj

Am I doing something wrong or is this a bug with img-touch-canvas?

Hi,
thank for this great script! i just cant find a way to rotate the image/canvas without mirroring the touch controls. can you give me a tip?