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.
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,
Learning how to utilize Bootstrap, I noticed that the thumbnails had strange markup for the image source (at least, strange to me.)
<img data-src="holder.js/260x120" alt="260x120" style="width: 260px; height: 120px;" src="data:image/png;base64,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">
What's going on here, and why is this being done? Is the image somehow saved to local storage at some point in base64?
To clarify, I'm asking about the src="image:/ part.
What you are seeing is not the HTML5 data- attribute, but the data URI scheme. To quote Wikipedia:
The data URI scheme ... provides a way to include data in-line in web
pages as if they were external resources. This technique allows
normally separate elements such as images and style sheets to be
fetched in a single HTTP request rather than multiple HTTP requests,
which can be more efficient.
What you're seeing is the base64-encoded image data, in this case a PNG. When browsers see this, they decode the data as instructed, and display it as if it were an external resource.
Given this image's size, the creators of Bootstrap rightly believe it is more efficient to inline the image like this rather than keeping it separate. Had they kept it separate, it would require an additional HTTP request to load the image, which increases the total load time of the page.
In the case of Bootstrap, what I think you are seeing is Javascript being used to generate the data that goes in the src attribute.
If you look at the raw source (not the source in the inspector), you will probably not see the src attribute, only data-src.
The data-src attribute is an instruction to javascript to use the holder.js script to generate the data to go in the src.
So holder.js generates the image, which is then loaded into the img as a data uri as explained by the other answers.
I'm working on a minimalist image creation project and I need to have the ability to create images within the browser that are uploaded and used on a server.
I've managed to create the image data for the server via calling the toDataUrl() method on my canvas object. Specifically, I create my image by calling toDataUrl('image/gif') but the resulting image is not RLE compressed. Is there a way that I can force the toDataUrl method to create a compressed GIF?
The spec leaves it up to the browser on how to implement the GIF mime type. The only guaranteed MIME in the spec is image/png
So unfortunately, even if you're lucky enough that the browser will generate GIF, there doesn't seem to be any browsers currently that take RLE into consideration.
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.
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.