Say I've written a simple app that draws circles in browser. Now I'd like to let people save their pictures. How would I store the data on the server? Which format would be the best option? Should I simply store the relevant html? What would be the case when I would want to make a custom format that is stored on the server and parsed back to html canvas when loaded?
How would I store the data on the server?
Which format would be the best option?
Since they are just circles, you probably just need starting coordinate, size, line thickness, and colour. Sounds like its easy enough to store with SQL.
Should I simply store the relevant html?
What HTML? Drawings on canvas are not exposed in the DOM. That's why canvas is (currently) awful for accessibility (unlike SVG).
What would be the case when I would want to make a custom format that is
stored on the server and parsed back to html canvas when loaded?
I'd transport it as JSON and then loop over the dataset with JS to redraw it.
canvas.toDataURL should allow you to do such things. check out canvaspaint.org's source code to see how to save on local computer and on server.
This might help: Save a <canvas> as a file in a form.
This demo shows how to save locally -- though, for me at least, Save PNG (etc.) work in Firefox but not Chrome.
Related
Is there a way to disable a user from downloading a file from a URL?
For example I have a link:
wow.mywebsitedomain.com/templates/filename.svg
I want to disable the user from downloading the filename.svg
These svg files are not just an image, they are editable designs that I have spent countless hours on each. No, I do not care if someone does a screenprint or gets a png etc, as those are not scalable, editable, vector files.
When the user clicks on a png thumbnail my actual link opens my online design editor to allow the user to customize these files, then save to my server, then purchase printed media, and they are not allowed to download any files.
I tried putting the actual files into a password protected folder on my server, but they do not open properly, and I do not want the user to have password access to this folder.
Essentially I need the link to be accessible, just not show the actual link for someone to copy and open/save/download etc.
Hopefully there is a simple solution for a non-programmer with basic html skills?
Thanks
Your can do things like "disabling right-click" and stuff - it may prevent some users from downloading your file, BUT basically you cannot prevent a file which is downloaded and interpreted by the browser from being downloaded to a user's hard drive.
This is not only true for SVGs, but also for music, videos, etc.
Instead, you can convert your SVG file to a PNG on server-side, and show only the PNG to the user. Note that you have the possibility to create PNGs of different sizes on the fly - dependent on the request, user's screen resolution, etc. You can also implement caching of the generated PNGs if needed.
On how to create a PNG from SVG in PHP read here:
Convert SVG image to PNG with PHP
You can choose other raster image format, of course.
If they can view it, they can download it. End of story. If you only want them to see a PNG, make a PNG from it and put that up
My understanding is; if you can see it, you can download it,
I'm currently writing an HTML5 WYSIWYG using Google Closure Library and I'm providing users to just drag and drop the image file to contenteditable field with text to add an image.
So I have two ways to store these images:
1. Retrieve the data URL from dropped file, create an IMG tag, set the retrieved data URL as value of attribute SRC of this image and insert this IMG tag into editor's field. When user will submit the form I'll just save all retrieved HTML in my MySQL database and will able render his text with images later.
2. Upload the dropped image to my server and save it as regular file.
Then the server will answer like:
"image saved, its URL is http://example.com/images/uploaded-image.png".
After that I will perform the steps similar to my item 1 (create an IMG tag with attribute src="http://example.com/images/uploaded-image.png" and insert it into editable field).
The first way will load database more because it requires to store an image dataUrl in database field together with text. But it makes image adding more easy and fast, so it improves the user's experience.
The second way will load database less because the images will stored separately (in the file system), but this way requires more requests to the server and some processor time on each image adding into text within the WYSIWYG. Also it will not show an immediate result to user so the user will need to wait when his image will uploaded, what will make user's experience worse.
I need the help to understand which way is more preferable in my case considering all pros and cons.
Another way is to store not only images but complete HTML with images in one file. And use the database for storing a link to the HTML file. Then setup Nginx and get the best performance. IMHO if your application is WYSIWYG then the content should be loaded and laid out completely in the browser before editing.
I want to use a web browser to present some multimedia information with locally stored HTML files. The problem is that it just presents the static content without any HTML elements, and also doesn't show the images. The sample code is:
StreamReader reader = new StreamReader(TitleContainer.OpenStream("pathString"));
webBrowser.NavigateToString(reader.ReadToEnd());
The best way to do this is to copy your html file and images to the same directory in Isolated Storage (see: http://msdn.microsoft.com/en-us/library/ff431811(v=vs.92).aspx). Then, you call
webBrowser1.Navigate(new Uri("<Location_of_html_file_in_isolatedStorage>", UriKind.Relative)).
If the images and the html file are in the same directory in isolatedStorage, relative links to your images in this format:
<img src="../YourImage.jpg"/>
Will work correctly.
I don't suppose the WebBrowser control could get access to any images that might be stored in isolated storage, so all the content you want displayed - you would probably need to somehow embed it in a single html, which would probably require some js code (I am not a js/html expert), which needs to be enabled in the control (IsScriptEnabled if I remember correctly). Otherwise - it might be better to convert your HTML to XAML or just otherwise parse it and display it by code.
I have a TGA image encoded in Base64
https://gist.github.com/984770
But it doesn't show on the browser.
Is there a way to show a TGA image on the browser or it is not supported? Is there any client side technology I could use to achieve this?
It's not supported.
I assume there probably are Java or ActiveX plugins that can do it, but it's going to be complicated, cumbersome, have spotty support, and of course won't work with base64 data.
If it's just a few images, consider converting them to JPG, PNG or GIF manually, depending on what type of image they contain.
If it's many images and you need an automated solution, a good way would be to employ a server-side script that calls e.g. ImageMagick, and creates a JPG thumbnail from the image.
You could easily send the base64 data to the script using Ajax for example, receive the name of the converted file in return, and create an <img> element pointing to it.
I am receiving a BASE64 encoded string from a WebService. The string represents an HTML page, and I can use built-in ColdFusion functions to convert and display it. However, I need a GIF representation of the HTML page, and I'm wondering if there's any way to do this using ColdFusion.
NOTE: The website I'm working on is ColdFusion 8.
UPDATE: As it turns out, the vendor gave me incorrect instructions (different from their documentation). I don't need to output a GIF of the document they are sending, so this is a non-issue now. However, seeing as the question has received 6 upvotes already, I'm going to leave the it open, as I'm curious if there is - or will be - an answer someday.
You could save the html to the file system, and use this technique for creating URL Thumbnails
Since CFIMAGE's writeToBrowser doesn't allow you to output a GIF (as you've no doubt found out), you'd have to take the image and save it to the filesystem as a gif, then write an HTML IMG tag pointing to that GIF file.
You can't write a gif but you can take the base64 and write it to the browser as a png.