I'm currently developing a website in ASP .NET MVC and I require functionality for a user to be able to draw a picture on a canvas which can be saved in a database. What is the best method for doing this? preferably a very lightweight solution. I was thinking flash would be the most accessible platform and there may be some good free solutions.
Thanks
Flash can do it pretty easily, though you'll have to get your back-end set up to enable it. Basically you can draw anything on your stage to a bytearray of pixel data, then encode that bytearray to comply with for instance the .PNG specification. Then you send the whole package over to your back end as a byte array and make sure that your server-side scripts know to write it as a .png file to your server, then save the location in your database. Does that make sense?
A broad example can be found here on the Flex Cookbook: http://cookbooks.adobe.com/post_Creating_a__png_file_from_a_webcam_image-12732.html
You can do this in DotNet using the canvas.
canvas.SaveAs(dstfile, "Quality=high");
Here is the tutorial: http://www.websupergoo.com/helpig6net/source/3-examples/1-drawimage.htm
No need to use Flash.
An excellent way of saving an image is to use the native toDataURL method.
var element = document.getElementById('drawingCanvas');
var data = element.toDataURL();
// data holds the base64 encoded image of the canvas
From there you can post it asynchronously to the server
$.ajax({
'type': 'post',
'dataType': 'json',
'data': {'image': data},
'url': '/json/image_converter.php'
});
and convert it to an image using ImageMagick:
list($header, $data) = explode(',', $_POST['image']);
$image = base64_decode($data);
$magick = new Imagick();
$magick->setFormat('png');
$magick->readImageBlob($image);
$magick->writeImage('/home/dude/imagefile.png');
Edit: Oh, and of course I forgot to say that IE doesn't support canvas, hence no toDataURL method. Even with explorer canvas workaround.
You should be able to do something like this in Silverlight... Silverlight should be able to, without difficulty, translate the mouse movements into line strokes. I don't know if there is a pure JavaScript solution too.
User MouseUp,mouseDown and MouceMove events along with LintTo,MoveTO events of canvas (all javascript) to draw a picture and then use canvas.toDataURL() to save this picture in a base64 string in yr database.
Related
I am using late binding to connect to MS Outlook and to open and extract info from outlook emails using the MailItemobject.
I am trying to save attachments to file. This is fairly straightforward in most instances using the Attachment object and its SaveAsFile method.
However, it does not work where the Attachment Type is olOLE. I believe this only relates to documents embedded in emails created in RTF format (hopefully few and far between nowadays).
Via the Attachment object it is possible to access MAPI properties not exposed by the object model using its PropertyAccessor.
The relevant MAPI property for OLE objects is PR_ATTACH_DATA_OBJ, which can be accessed using the PropertyInspector as in the following example:
Function SaveOLEAttachmentToFile(Attachment:Variant; fn:String): boolean;
var
OPA, PropName : Variant;
begin
Result := false;
OPA := Attachment.PropertyAccessor;
PropName := 'http://schemas.microsoft.com/mapi/proptag/0x3701000D '; //PR_ATTACH_DATA_OBJ
?????? := OPA.GetProperty(PropName);
end;
I am stuck at this point as I can't know work out what Delphi type to save the data to and I am not even sure this is possible having read the MS documentation (Click here). PR_ATTACH_DATA_OBJ returns a PT_OBJECT. I am hoping that this object contains the raw data which (if I could work out how to access it in Delphi) can be simply saved to a file. However, the documentation suggests it may not be that simple and it's possible I may have to work with Extended MAPI. I have spent a few hours researching the latter with no concrete result other than a headache. I appreciate I could use Redemption, but I don't want to use a third party tool for something which is fairly minor in the round.
If anyone can advise as to a data type to hold the PT_OBJECT from which it can be simply saved to file that would be my route one.
Failing that, if I need to dig deeper into MAPI, I would be grateful if anyone could clarify/amplify my research so far. I have the following steps:
Initialize MAPI.
Get an IMAPIPROP interface. I think I should be getting the interface from my Attachment object and the following seems to work (ie compiles and executes without problems): MAPIPROP := IUnknown(Attachment.MAPIObject) as IMAPIPROP. Failing that, I would have to cast the parent MailItem to IMAPIPROP interface and work my way down to the attachment via GetAttachmentTable.
Load the attachment data into an IStream: if Succeeded(MAPIPROP.OpenProperty(PR_ATTACH_DATA_OBJ, IStream, STGM_READ, 0, IUnknown(SourceStream)) then
Extract the data from the IStream and save to file
I have failed to get as far as point 3 as something would seem to be wrong with my initial casting to IMAPIPROP albeit it does not cause any violations. I have tried reading a single property from the MailItem cast to IMAPIPROP using the following code:
if (Succeeded(HrGetOneProp(MAPIPROP, PR_SUBJECT, Prop))) then
And I get an access violation. Likewise if I cast the Attachment object and query an attachment property I also get a violation. I don't think the problem lies with the call to HrGetOneProp, I think it has to be the casting to IMAPIPROP.
Any pointers re the above would be greatly appreciated.
Not quite an answer to my question, but I have thought of an alternative solution. What I am ultimately trying to do is convert a msg email as a pdf. To do that I need to extract the body and then somehow insert the embedded images. With an html email this seemed pretty straightforward ((1) extract all the attachments to a folder, (2) parse the html body for references to SRC IMG and update the location of the image to reference the saved files and (3) save the edited html body to file and open it in Word and save as PDF).
RTF emails cannot be handled in this way. However, for my specific problem there is a much easier way to achieve what I need for all email types using Outtlook and Word.
Use the MailItem.SaveAs function and save the email in either html format or mthml. The former format will save all embedded images to a sub-folder (in png and jpg formats) should you need them for any other reason. once you have your html file, open it with Word and save to PDF.
If Office is not a solution then you need to figure Istorage or use one of the Extended MAPI solutions such as Redemption.
For Delphi users there are also the following commercial offerings that I have come across in my recent travels:
IMIBO
Scalabium
Rapware
I did come across one more solution which I can't find at the moment! Will post an update if I do.
PropertyAccessor (and the Outlook Object Model in general) does not handle PT_OBJECT type properties.
What you need to do is open the PR_ATTACH_DATA_OBJ property as IStorage, and then extract the data from there (it depends on the actual type of the attachment). You can see the data in the streams in OutlookSpy (I am its author) - select the message, click IMessage button on the OutlookSpy rubbon, go to the GetAttachmentTable tab, double click on the attachment to open it, select the PR_ATTACH_DATA_OBJ property, right click, select IMAPIProp::OpenProperty, then IStorage.
If using Redemption (I am also its author) is an option, its version of RDOAttachment.SaveAsFile handles OLE attachment for the most popular formats (Word, Excel, bitmap, Power Point, Adobe PDF, etc.) - create an instance of the RDOSession object (using either CrealeOleObject or RedemptionLoader) and use RDOSession.GetRDOObjectFromOutlookObject method (pass either Attachment or MailItem object) to get back RDOMail or RDOAttachment object respectively.
We are currently building an asset tracking widget using Mapbox-GL.
When zoomed in, we show the actual assets, and this works fine.
But, when zooming out, we would like to switch to a cluster view to get a proper overview of how many assets are where.
From my understanding, such layer needs to have a predefined datasource. eg. GeoJson.
Is there any way to feed Mapbox-GL data from live JS data?
The assets themselves are markers, an afaik there is no way to switch from makers to something else.
So I assume we would have to generate the datasource from the data that makes up the markers somehow?
The sources seems to be using URL's for getting the actual data so I'm at loss here,
Can I transform a set of geo points into something that MapboxGL can use as a data source?
It's rather confusing what you are asking, but in general, there is no problem with updating data live.
Create the data source:
map.addSource('assets', { type: 'geojson', data: { type: 'FeatureCollection', features: [] }})
Then update it:
map.getSource('assets').setData({ ... })
I didn't understand what you mean by:
such layer needs to have a predefined datasource. eg. GeoJson.
or
The assets themselves are markers,
or
an afaik there is no way to switch from makers to something else
Trying to stretch my understanding of how mapdeck can plot maps and the new (new to me) Ordnance Survey Vector Tile API that can display 3D buildings
See
https://labs.os.uk/public/os-data-hub-examples/os-vector-tile-api/vts-example-3d-buildings
Has anyone any advice about how to reference the labs.os.uk data as a layer in mapdeck?
I suspect it is not possible to set a transformRequest function when using Mapbox via Mapdeck.
But you can probably do it by downloading the tile json from https://api.os.uk/maps/vector/v1/vts&key=your_os_api_key&srs=3857
Edit by appending &srs=3857 to the "tiles" url.
Save the edited tile json to your server.
Then download a copy of the 3d style json from https://github.com/OrdnanceSurvey/OS-Vector-Tile-API-Stylesheets/blob/master/OS_VTS_3857_3D.json
Edit by appending &key=your_os_api_key to the "sprite" and "glyphs" urls, and edit the "sources" "url" entry to point the tile json on your server.
Save the edited style json to your server.
Hopefully Mapdeck can then be used with style = parameter set to the url of the style json on your server.
CKEditor beginner here, so be patient please...
I'm using the CKEditor and I was wondering about the recommended approach for making sure that all the URLs used are absolute without the scheme. For instance, suppose someone inserts an image which points to http://www.someplace.com/img1.jpg. I'd like to make sure that the image references only the //www.someplace.com/img1.jpg.
Is there any event I should handle or is it better to just do it directly on the source (server side)? Btw, the text isn't limited to a specific number of chars (so it might be just a couple of paragraphs + some pics and anchors or it might be a really long text...)
Any ideas?
Thanks.
When you insert image through Image dialog it should be enough to specify //path_to_image/image_name.jpg (without the http or https). When you insert link through Link dialog, it should be enough to select Other in protocol dropdown and specify URL as e.g. //google.com. (I think it is also possible to make Other the default option in dropdown using dialogDefinition event)
When pasting HTML, text or images you could try using paste event and modify the incoming data:
var editor = CKEDITOR.replace( 'editor1', { });
editor.on( 'paste', function( evt ){
evt.data.dataValue = evt.data.dataValue.replace( /https?\:/, '' );
} );
I've wrote some application in Flash cs5, wich allow users to make their own Christmas Cards, but at the end of programming I realized, that I should to provide some function to save user's card to seperate SWF-file...
Please, anyone who knows, help me! I tried to find something in Google, but all what I understand is that I should use ByteArray. But I can't really get, HOW I can use it in my case?
All I have found is this four lines:
var buffer:ByteArray = new ByteArray();
buffer.writeObject(MOVIE_CLIP_HERE);
buffer.position = 0;
buffer.writeBytes(...);
For seniors maybe it can help, but I can't get how with help of this lines I can solve my problem... thank you very much)))
You will need some server-side technology, like PHP or ASP, because Flash Player can't save anything on disk. And if you think about creating a swf file programmatically, that can be very difficult. That being said, this is how I would do this:
First, I would write the movieclip to a ByteArray, just like in your example:
var buffer:ByteArray = new ByteArray();
buffer.writeObject(card_mc);
Then I would send the byte array to a PHP script which would save the data from the byte array in a file (a text file will do). The saved data will actually be your serialized movieclip.
Then, I would create a swf file which will serve as the actual card, but it will be in fact a container for the saved movieclip. This file will load the data from the text file into a ByteArray and deserialize the movieclip:
var loadedClip:MovieClip = MovieClip(byteArray.readObject());
Once you have managed this, you're done. When users save their cards to their computer, you can send them the container swf file and keep the data file on your server (but in this case the swf will need to load the movieclip from your server), or you can give them both files.
I hope this helped.