Is there a way to turn the ByteArray back into a BitmapData after using BitmapData.encode()?
No, there isn't. You have to use Loader to load encoded JPEG and access bitmap data through the loaded content:
var bitmap:Bitmap = new Bitmap(new BitmapData(100, 100, false, 0xFF0000));
addChild(bitmap);
var bytes:ByteArray = new ByteArray();
bitmap.bitmapData.encode(bitmap.bitmapData.rect, new JPEGEncoderOptions(), bytes);
bitmap.bitmapData.dispose();
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, function(event:Event):void
{
var bd:BitmapData = Bitmap(LoaderInfo(event.target).content).bitmapData;
bitmap.bitmapData = bd;
});
loader.loadBytes(bytes);
Related
function playvideo(path:String, wid:Number=1280, heigt:Number=720):void
{
var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
ns.client = this;
ns.addEventListener(NetStatusEvent.NET_STATUS, statusChanged);
ns.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
SoundMixer.stopAll();
var vid:Video = new Video();
ns.play(path);
vid.width = wid;
vid.height = heigt;
vid.attachNetStream(ns);
mc_bg.removeChildAt(0);
mc_bg.addChild(vid);
}
Greetings, here's my "playvideo" function. whenever I try to move variables outside of function to control the video from elsewhere(for example "vid"), specific movieclips and buttons dissapear(are not shown on the stage). Is that some kind of a bug or am I doing something wrong? Thanks!
do this:
var vid:Video = new Video();
function playvideo(path:String, wid:Number=1280, heigt:Number=720):void
{
var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
ns.client = this;
ns.addEventListener(NetStatusEvent.NET_STATUS, statusChanged);
ns.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
SoundMixer.stopAll();
ns.play(path);
vid.width = wid;
vid.height = heigt;
vid.attachNetStream(ns);
mc_bg.removeChildAt(0);
mc_bg.addChild(vid);
}
And same for any var, declare outside function
I am trying to invert the color of an image. Now the image loads ok, but when I try to call getImageData and putImageData back onto the canvas. The canvas is simply blank. Then I printed out all imageData, it appears like that it is always 0 for some reason. I am seriously troubled by this. Please help and thx in advance!
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "hand.jpg";
img.onload = function() {
ctx.drawImage(img, 10, 10,50,50);
}
var imgData = ctx.getImageData(10,10,50,50);
console.log(imgData.data.toString()); //return 0's
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i]=255-imgData.data[i];
imgData.data[i+1]=255-imgData.data[i+1];
imgData.data[i+2]=255-imgData.data[i+2];
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,100,100);
}
You need to wait for the image to load
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "hand.jpg";
//================================================================
// this event will only get called after you have returned from this function
img.onload = function() {
ctx.drawImage(img, 10, 10,50,50);
}
//================================================================
// The image has not loaded at this point
// the following code will always be working on an empty canvas
var imgData = ctx.getImageData(10,10,50,50);
console.log(imgData.data.toString()); //return 0's
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i]=255-imgData.data[i];
imgData.data[i+1]=255-imgData.data[i+1];
imgData.data[i+2]=255-imgData.data[i+2];
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,100,100);
//================================================================
// onload will fire after this point
}
To fix
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "hand.jpg";
img.onload = function() {
ctx.drawImage(img, 10, 10,50,50);
var imgData = ctx.getImageData(10,10,50,50);
for (var i=0;i<imgData.data.length;i+=4){
imgData.data[i]=255-imgData.data[i];
imgData.data[i+1]=255-imgData.data[i+1];
imgData.data[i+2]=255-imgData.data[i+2];
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,100,100);
}
}
BTW you can invert the image colours with
ctx.globalCompositeOperation = "difference";
ctx.fillStyle = "white"
ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.globalCompositeOperation = "source-over"; // restore default
I have send parameters for my backend in PHP but i have code and i not send parameters look
var request:URLRequest = new URLRequest(modelLocator.CaminhoServidor+"AnexoDocumentos_Financeiro/asdas/xml.php");
var loader:URLLoader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.VARIABLES;
request.data = Remessa;
request.method = URLRequestMethod.POST;
loader.addEventListener(Event.COMPLETE, RecebeXML);
loader.load(request);
how send 3 parameters this code?
You need to use the 'variables' field in the URLRequest object:
var request:URLRequest = new URLRequest(url);
request.method = URLRequestMethod.POST;
var variables:URLVariables = new URLVariables();
variables.param1 = ...
variables.param2 = ...
variables.param3 = ...
request.data = variables;
var urlLoader:URLLoader = new URLLoader();
urlLoader.dataFormat = URLLoaderDataFormat.VARIABLES;
urlLoader.addEventListener(Event.COMPLETE, urlLoader_complete);
urlLoader.addEventListener(IOErrorEvent.IO_ERROR, urlLoader_error);
urlLoader.load(request);
Also, it's a good idea to define handlers for errors (as shown for IO_ERROR above but also HTTP_STATUS and SECURITY_ERROR)
I am a new user and cannot comment on this post: dragging and resizing an image on html5 canvas regarding drag and drop/resize image with anchors...
could someone please clarify how to apply the resize/drag/anchors to an uploaded image rather than a pre-loaded image please?
I have had a go but its killing me..
uploader html:
<input type="file" id="imageLoader" name="imageLoader" />
uploader js:
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e) {
var reader = new FileReader();
reader.onload = function (event) {
var img = new Image();
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, 200, 140);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
fiddle
your code is written to handle the global var img.
When you load a new image, a new local img var is created, which you only draw on the context.
What you need is to have the new image replace the old one.
So just change, in your file loader :
function handleImage(e) {
var reader = new FileReader();
reader.onload = function (event) {
img = new Image(); // not 'var img=...'
img.onload = function () {
draw(true,true); // just update your app
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
it workd, as you can see here :
http://jsfiddle.net/LAS8L/108/
I'm pretty new to js and have only done a little bit of html however this seems like something that would be simple: I'm just trying to draw an image onto a canvas! If adding the new image to my main div (gameObjectElement) it works fine, but when trying to draw it on a canvas it doesn't show. The fill text shows up on the canvas so I believe the context stuff is correct.
var marthPic = new Image();
marthPic.src ='images/marth.jpg';
$(gameObjectElement).append(marthPic);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",300,50);
ctx.drawImage(marthPic, 100, 100);
Any ideas?
thanks
You need to wait for the image to actually be loaded before you add it to the canvas. You can do this with an onload handler:
var marthPic = new Image();
marthPic.src ='images/marth.jpg';
$(gameObjectElement).append(marthPic);
marthPic.onload = function () {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",300,50);
ctx.drawImage(marthPic, 100, 100);
};
Edited because I'm a noob (lucky cache hit):
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var marthPic = new Image();
marthPic.src = 'images/marth.jpg';
marthPic.onload = function() {
ctx.drawImage(marthPic,10,10);
};
</script>