Saved FabricJS don't store lockScalingX - json

After a few test I finally saved a fabric.canvas to a MySQL database, the problem is that I don't want that the images in the canvas can be resized, I only need the rotation. Unfortunately the json stored doesn't store the lockScalingX and lockScalingY properties of the fabric.Image object and when I retrieve the fabric.canvas I can resize the image.
Is there any way to avoid this?
I use the function
var jsonCanvas = JSON.stringify(canvas.toDatalessObject());
to store the json to a database using php
And I retrive the stored json using
canvas.loadFromJSON(data);
To see what I'm talking about see this fiddle -> http://jsfiddle.net/lpccoder/YX9Wf/1/
I set the oImg.lockScalingX = oImg.lockScalingY = true; before to add to canvas to avoid resizing.
The button Save, saves the canvas but when I load it (using Load button) I can resize the image.
Well as I don't received any answer for this, I'm trying to set the lockScalingX and lockScalingY after load the canvas, but some strange behaviour happens when I use the forEach method. I mean, I need to put an alert before the forEach to get this working, if I don't put this alert the forEach loop doesn't work. To clarify this you can see and compare this two fiddles:
Working one -> jsfiddle.net/lpccoder/hGPCG/
Non working one -> jsfiddle.net/lpccoder/Vv4AW/
I'm new on javascript coding, maybe it's a newbie question, but I think that's a very strange behaviour... Any solution?

Thanks to Rodrigo Pandini who answer this question at https://groups.google.com/forum/#!topic/fabricjs/rGX8F93TeGE
The solution is to use the callback function to set the properties manually:
canvas.loadFromJSON(jsonCanvas, function(){
var objects = canvas.getObjects();
// Trying to set the property after load JSON
//alert('Objects: ' + objects);
objects.forEach(function(o) {
o.lockScalingX = o.lockScalingY = true;
});
canvas.renderAll();
});
Because as far as I know the json doesn't store this properties.
You can check the final solution at -> http://jsfiddle.net/lpccoder/Vv4AW/1/

Related

CefSharp and frames, only retrieving HTML from first frame

pcpao.org/general.php?strap=152814186280001650
In trying to get the full HTML from that site, .GetSourceAsync and .ViewSource, both only show the 'frameset' HTML. Using the ShowDevTools option, the full HTML data is in both the elements collection and the Sources of the Chrome-devtools.
I am running this after the webpage has loaded, but it should all be there still since its in the dev-tools?
What am I missing to get the full HTML out of a navigated site. I suspect this has to do with frames but after an hour of googling and reading old messages I see this only tangentially mentioned.
Winforms
package id="cef.redist.x64" version="3.2526.1362" targetFramework="net46"
package id="cef.redist.x86" version="3.2526.1362" targetFramework="net46"
package id="CefSharp.Common" version="47.0.3" targetFramework="net46"
package id="CefSharp.WinForms" version="47.0.3" targetFramework="net46"
I was having the same issue trying to get click on and item located in a frame and not on the main frame. Using the example in your answer, I wrote the following extension method:
public static IFrame GetFrame(this ChromiumWebBrowser browser, string FrameName)
{
IFrame frame = null;
var identifiers = browser.GetBrowser().GetFrameIdentifiers();
foreach (var i in identifiers)
{
frame = browser.GetBrowser().GetFrame(i);
if (frame.Name == FrameName)
return frame;
}
return null;
}
If you have a "using" on your form for the module that contains this method you can do something like:
var frame = browser.GetFrame("nameofframe");
if (frame != null)
frame.EvaluateScriptAsync("document.getElementById('whateveridyouwanttoclick').click();");
Of course you need to make sure the page load is complete before using this, but I plan to use it a lot. Hope it helps!
Thanks, some examples from previous versions had me confused how this works. I was looking for something like this.
var frameIdent = Browser.GetBrowser().GetFrameIdentifiers();
var result = Browser.GetBrowser().GetFrame(frameIdent.Last()).GetSourceAsync().Result;
textBox1.Text = result.ToString();
So I guess the way to get all HTML from a site is loop through the frames identifiers list, get the result from each frame via GetSourceAsync and concatenate them all to a string.

Copy an Image from Flex Application (Web) and paste it outside the application

I have a requirement that we should be able to copy an image displayed in our application, to Clipboard and paste it outside (Like on Excel).
I was trying the below code snippet (Inside a button Click).
Clipboard.generalClipboard.clear();
var dataLoaded:Boolean = Clipboard.generalClipboard.setData(ClipboardFormats.RICH_TEXT_FORMAT,
byteArray, false);
The dataLoaded object is true, however it does not paste anything when tried on Excel or MsPaint.
Do we have any way to achieve this?
Thanks.
The code you are showing is not enough in itself to get a successful transfer. Like many other operations within the security sandbox of a FP app (web) this code can only respond to a direct user interaction. So your code without any valid context cannot work of course but if called within a mouse down listener for example (a true user generated mouse event, creating a fake mouseevent would still not work) it should respond correctly:
private function handleMouseClick(event:MouseEvent):void
{
Clipboard.generalClipboard.clear();
var dataLoaded:Boolean = Clipboard.generalClipboard.setData(ClipboardFormats.RICH_TEXT_FORMAT, byteArray, false);
}

AngularJS - Dynamically change class and load JSON - two things, really

I'm facing an issue (or probably two) that is frustrating the swearwords out of me; keep in mind, I'm a fairly beginner coder, so there's a good chance I'm missing something obvious.
One: I've got a page that has a sidebar that is hidden via a class containing margin-left: -90%. When the class is removed, the bar slides in to fill the whole screen. I can handle this really easily with jQuery, but I'd rather stick as much as possible in Angular - to this end, I've given it the following code:
<div id="detail_box" ng-class="{d_hide: dVis}">
<div tw-detail></div>
</div>
Which, as you can see, has a class that refers to a variable in a controller, and a link that has an ng-click connected to a function. The controller in question is stupidly simple, and relies on $rootScope variables. I'm only using rootScope because in total, over my whole page, I have two variables that will need to change dynamically, but be the same, for every controller and directive I've made. The connecting scope and controller are here:
app.run(function($rootScope) {
$rootScope.currentUrl = 'visual/design/1/';
$rootScope.detail_hide = true;
});
app.controller('navController', ['$scope', '$rootScope',
function ($scope, $rootScope) {
$scope.dVis = $rootScope.detail_hide;
$scope.hide = function(){
$rootScope.detail_hide = false;
}
}]);
Now, I've used console.log from my ng-click to see that it is picking up clicks, and I've used console.log to make sure that the detail_hide part of rootScope is changing. If I change true to false by hand in my app.js, the detail page hides itself just fine... but that ng-click doesn't actually do what I'm trying when I test it on the page. It's painful and I can't understand why changing the variable via a function (which I know changes the actual variable in rootScope, thanks to extensive testing) isn't telling my detail box to just go away.
Secondly, and it's connected to the first; dynamically changing the currentUrl in rootScope similarly doesn't change the actual AJAX content I've got stuck inside my twDetail directive, even though, again, the ng-click functions I've written do change the variable. Changing it manually works fine (although images in the second URL aren't loading but that's probably an entirely different problem) but just... what the heck am I doing wrong here?
The following code is only being run once, when the controller is being setup
$scope.dVis = $rootScope.detail_hide
Make sure you change the $scope.dVis in the hide function, like this
$scope.hide = function(){
$rootScope.detail_hide = false;
$scope.dVis = $rootScope.detail_hide;
}
I need more info on the twDetail directive to be able to solve that problem

AS3 POST png to PHP

Have read many similar but no solutions: I'm trying to do something (that i think is) really simple,
Take a photo from gallery or camera - and POST this to a URL. No saving / returning to application. The PNG is just used by the webpage in display and user moves onward.
public function postPicture():void {
PNGEncoder2.level = CompressionLevel.FAST;
var encoder : PNGEncoder2 = PNGEncoder2.encodeAsync(_bitmapData);
encoder.targetFPS = 12;
encoder.addEventListener(Event.COMPLETE, function (e):void {
var png : ByteArray = encoder.png;
var header:URLRequestHeader = new URLRequestHeader("Content-type", "application/octet-stream");
var jpgURLRequest:URLRequest = new URLRequest("https://myurl.com/mypage");
jpgURLRequest.requestHeaders.push(header);
jpgURLRequest.method = URLRequestMethod.POST;
jpgURLRequest.data = png;
navigateToURL(jpgURLRequest, "_blank");
});
}
Also to note, we're getting some odd characters on the end of the URL: C9%90NG
Hunch is that I'm decoding and then not encoding properly before sending i.e. these characters some part of raw image info.
When I test from chrome POST extension with another image, server side stuff works fine so guessing a problem with AS3.
basically its working when I use chrome to browse > my.png and POST it at the page. Am I missing something with the AS3 png encoder? i.e. how to turn that bmpdata into a 'file' rather than an array of bytes.
thankyou
You need to use multipart upload. It's a common situation with a well defined standards for that. You can implement it by yourself but it will take some time and efforts.
What I've used before is the Multipart URLLoader Class provided by Eugene Zatepyakin, one the best Flash guru's out there :)
It's some kind of old but does the job extremely well. You can add variables, files, whatever content you want to your loader and simply submit it. There are examples with the php side of the thing so you can understand what's going on.

event.DataTransfer doesn't transfer ID of dragged object when running in Jetty

I have a Maven Jetty project with JSPs using JavaScript. I want to be able to highlight parts of a canvas corresponding to the dragged image's size.
When I look at my JSP by simply opening it in the browser everything works as expected but when I start the Jetty Server with the goal jetty:run the ID of the dragged object is not being set or cannot be retrieved from the transferData of the event.
The relevant code: All draggable images have a unique ID. On drag start I set the ID of the dragged image on the event's transferData like this:
function dragShipFromTable(event) {
event.dataTransfer.setData("id",event.target.id);
}
When the image is dragged over the canvas I call the following function
function allowDrop(event) {
event.preventDefault();
var id = event.dataTransfer.getData("id");
var img = document.getElementById(id);
// Do the highlighting stuff
....
}
The problem is that when the server is started and I do the above action then in allowDrop(event) the ID of the dragged image is not being retrieved from the transferData. It is undefined and therefore the highlighting fails. This is not the case when simply opening the JSP as a File.
Well I kind of found the answer to my own question. First of all the setData method on the dataTransfer object only allows certain formats as first parameter. I interpreted it as an associative array but this is not the case. So it should be
event.dataTransfer.setData("text/plain", id);
event.dataTransfer.getData("text/plain");
to set and retrieve the id correctly.
But in the end everything failed due to chrome as there is a bug in Chrome which prevents me from using dataTransfer as intended (see How do you get the selected items from a dragstart event in Chrome? Is dataTransfer.getData broken? ).
I now use global variables to store the information I need. And still I am wondering why everything worked fine when the page was displayed as a file instead of as a response from the webserver.