I have an application that gets a JSON file via a web service. The JSON is fairly large, and represents a Person object, with typical properties such as first name, last name, title and image for example. The person's image is stored as a base64 field in the JSON. It is bound to an image tag using Angular. So for example, the HTML looks like this:
<img ng-src="data:image/jpeg;base64,{{ person.fileImage }}">
When the end user right clicks on the image and chooses to save the image, the browser defaults to the name "download.jpg". What I need to do is name the image so that when the user right clicks and chooses to save, it gives a meaningful filename, e.g.:
todd.davis.jpg
I'm not sure how to make this happen. I've seen some solutions that use an anchor tag with a download="todd.jpg" parameter, but that is not working for me. I think it expects an actual URL and in this case, I don't really have one. The image data is just embedded in the JSON.
Is there a way to manipulate this so that I can add a name to the image for saving purposes?
Related
I am building an application, on the front end there is there are a few fields, including a rich text editor (react-quill) that can take in an image. I have saved the values from the first page and displayed them back to the user for confirmation. In order to do so I used local storage in the form of formData as shown below
formData = {"questionTitle": "Here is a test field",
"questDesc": "<p>Here is the Image <img src=\"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcU.. />” }
My problem is after confirmation, I am trying to push the formData to MongoDB but I need to save the image (in cloudinary) separately from the database. How do I send the image to Cloudinary and instead save the URL in the MongoDB at the exact position that was inserted in react-quill?
I want to know if there is a better solution to my problem. Currently, the image is in base64 in local storage, is there a way to just refer to the route of the image while in local storage, and push it to the cloudinary after confirming? All pointers, and suggestions welcome!!
In vue-filepond, I can drag or select files and they process fine, but I want to be able to submit user entered data along with each image. For example, they may want to tag the image or enter a title, etc..
I can't find any documentation on how to do this?
You can use the file.setMetadata method (https://pqina.nl/filepond/docs/patterns/api/file/#methods) to add metadata to each file, each upload will contain a File object and a JSON object (the JSON object will contain the metadata).
I am working on a VBscript asp page that is supposed to render a user's photo graph from our database, based on an ID value that is passed to the page via the URL string, to be used in various email functions. This part works great, using the following code to render it:
Response.ContentType = "image/jpg"
Response.BinaryWrite(rsAttPic("ind_photo_ext"))
I was asked to provide a default image, because if the user does not have an image on file in the DB, they get a broken image icon. After some trial and error, I finally got something to work:
if (IsNull(rsAttPic("ind_photo_ext"))) then
Response.Write("<img src='placeholderm.png'/>")
else
Response.ContentType = "image/jpg"
Response.BinaryWrite(rsAttPic("ind_photo_ext"))
end if
This works when testing it through the presentation page on the website (showpic.asp) - both images display as expected, depending on the record being referenced in the URL. However, when that page, showpic.asp, is referenced by other sources (emails sent via campaign software, confirmation emails generated by our CRM software), only the user image shows up as expected. The generic image does not show in the emails, only a broken image link.
What is the difference between the two types of image presentation? I did notice in testing that the user image appears in the browser in the center, black bground all the way around it, while the default image appears in the top left corner of the browser window, white bground. Is that related?
I am building an application with fabrik and have a script that gets a base64 image code from an external source and then stores it in a database field. I would like to be able to display this image in fabrik lists on the frontend rather than displaying the base64 code. Has anyone done anything like this using fabirk in the past?
You can use a separate field that will take your base64 field and use it to construct an image tag when rendered in the list.
So let's say the data you want is in my_list___image. Create a separate field my_list___image_view of type calc.
In the calculation box, enter the following:
return '<img src="data:image/png;base64, {my_list___image}" alt="Alt text" />';
I'd also recommend adding a field for the image alt text. You also will have to take care of the image type. If they're all png or jpeg, that's fine otherwise you'll need to store or be able to derive that somehow.
I want to put a image into a post, but it seems I just cannot get it work.
For example, this one:
http://stockcharts.com/c-sc/sc?s=ACHN&p=D&b=5&g=0&i=t88400486500&r=9913
The output is a PNG file. So in HTML tab, i put,
< img src="http://stockcharts.com/c-sc/sc?s=ACHN&p=D&b=5&g=0&i=t88400486500&r=9913">,(I leave a empty space between the < and image otherwise, stackoverflow won't allow me to put a image tag here) it just won't show up the correct image. The image you will see is "go to stockcharts.com to view this chart", that is because the URL is wrong. If the URL is correct, the image will display fine. Any way to work around?
I was trying to play around with the formatting.php file, but so far, no luck.
(It is quite strange though, if you put the URL into your IE URL bar, and press enter, it shows up fine with a chart.)
Thanks.
Your URL is a web page, NOT an image. When you try to insert the link as an image, the html IMG tag is used to specify the FILE NAME to be inserted. The file can be on a different url but it should not refer to just another uri.
to get around it, you have 4 options:
Specify the image file name directly and not the uri with the img tag.
Use iframe and put the uri
use frame (I'd not go for this)
Use Ajax and fill it in a DIV tag - most effective in my opinion.