In canvas saving a MovieClip capture and send to php

[vvk10839047]

Need in HTML 5 capture image from MovieClip and send to php(for saving on server)

[Colin Holgate]

You can get the image data from the context of the canvas. Like this:

var w = 400;//width of movieclip

var h = 300;//height of movieclip

var l = 100;//left of movieclip

var t = 50;//top of movieclip

var ctx = canvas.getContext('2d');

var imagedata = ctx.getImageData(l,t,w,h));

[ClayUUID]

Sending raw image data sounds rather bandwidth-unfriendly. Note that you can have the browser convert canvas data to compressed image data for you automatically.

HTMLCanvasElement.toDataURL() - Web APIs | MDN

[Colin Holgate]

Would that easily allow you to only send the area of a particular movieclip. or would you expect server side code to do that extraction?

[ClayUUID]

The browser canvas API has no concept of a "movieclip", it just deals with arbitrary rectangles specified by the programmer.

I don't have access to Animate at the moment, but something approximately like this should work:

this.myClip.cache(x, y, width, height);

var myCompressedImageData = this.myClip.cacheCanvas.toDataURL("image/jpeg", 1.0);

this.myClip.uncache();

cache(), uncache(), and cacheCanvas are all implemented by CreateJS. toDataURL() is a native canvas method.

[coty_hsu]

Hi Colin,

wondering if you have any idea why the following codes not working, all the data I got is 0.

var ctx = canvas.getContext('2d');

var bmp1 = new createjs.Bitmap('http://lorempixel.com/400/200/sports/Dummy-Text/')

bmp1.image.onload = function()

{

  stage.addChild(bmp1);

  //ctx.drawImage(bmp1, 0, 0, 400, 200); //this line cause error

  var imageData = ctx.getImageData(0, 0, 400, 200);

  console.log(imageData.data);

}

Thanks,

Chih-Wei

[Colin Holgate]

It seems to be a cross domain security thing. Read this article:

https://blog.codepen.io/2013/10/08/cross-domain-images-tainted-canvas/

[coty_hsu]

thanks Colin, this work:

var image;

var bitamp;

var ctx = canvas.getContext('2d');

image = new Image();

image.onload = handleComplete;

image.src = 'https://media.truex.com/image_assets/2017-05-04/9922489c-9f69-4a5f-a355-2f11ae8d3a02.jpg';

image.crossOrigin = "Anonymous";

function handleComplete()

{

  bitmap = new createjs.Bitmap(image);

  stage.addChild(bitmap);

  ctx.drawImage(bitmap.image, 0, 0, 960, 500);

  var imageData = ctx.getImageData(0, 0, 1, 1);

  console.log(imageData.data);

}

[vvk10839047]

Thank you!