Managing Base64 images when saved by the user

For my new app, I am incorporating base64 encoded images displayed using data-URLs. Users can easily save these images by right-clicking and choosing "save as" or dragging the image into a folder.

However, I'm facing an issue where Chrome suggests a generic filename like "download" for the saved images, which doesn't even recognize them as actual images. Is there a way to control the suggested filename in Chrome when saving base64 encoded pictures?

I specifically need this functionality to work within Chrome only.

Any assistance on this matter would be greatly appreciated!

javascriptimagedownloadbase64filenames

Answer №1

Ensure that you are correctly setting the mime type for the image in the data URI. I found that by doing this, it resolved the file extension issue in Chrome 17. The file was downloaded as "download.png" and opened without any problems.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="/>

If you require complete control over the filename, you can utilize the HTML5 "download" attribute of the a tag to specify the filename. This involves creating a Blob object with your image data that can then be downloaded.

Check out a demonstration here:

For further information, visit: http://dev.w3.org/2009/dap/file-system/file-writer.html

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

After successfully navigating past the login page on my website using JavaScript, my Selenium driver suddenly ceases to function

My current automation test involves logging into a hotel booking website using Selenium and Cucumber. After successfully logging in, I attempt to click on a checkbox labeled "wifi", but encounter issues with Selenium not functioning properly once logged in ...

javascriptselenium-webdrivercucumber

Generate an interactive pie chart with visually appealing animations using jQuery, without any actual data

My task involves creating a pie chart to visually display different categories. However, the challenge is that the chart does not contain any data, ruling out options like Google charts or other data-driven chart makers. As a solution, I have turned the pi ...

javascriptjquerypie-chart

Find the item that has a specific value in its sub-property

Information Models: public class Header{ public int Identifier; public int value; public bool anotherValue; public List<Trailer> trailers; } public class Trailer{ public int ID; public Language MyLanguage; public string ...

javascriptc#jqueryasp.net

Exploring how Bootstrap 4 can manage flex-wrapped images that overflow into the previous column

In my design, I am requesting a left column that features a larger image and a right column displaying a wrapped list of smaller thumbnails. One issue I am encountering is that when I resize the window to be smaller, the thumbnails end up overflowing int ...

imagebootstrap-4flexbox

Navigating through elements within underscore.js templates

Can someone please help me out? I'm finding this task more difficult than it should be, so I must be overlooking something simple... I am working with a variable that is acting as an underscore template. Here is an example of the code snippet: var t ...

javascriptjsonunderscore.jsunderscore.js-templating

Guide on parsing an Array of arrays using JSON.parse

I have received a JSON.stringified Array of arrays in a variable named request. alert(request); When I alert the above, I get the following message: "[[\"0\",\"MahaShivRatri\"],[\"0\",\ ...

javascriptarraysjsontype-conversion

Steps for initializing textures in THREE.JS before use

Before beginning the rendering and animation of objects, I preload and create material textures. However, THREE JS only uploads textures to the GPU when the object is visible in the camera. This causes jerky animation when a new object appears on screen ...

javascriptperformancethree.jstextures

Guidelines on programmatically adding a directive to a div element in AngularJS

var myApp = angular.module('myApp', []); myApp.controller('someController', function($scope) { $scope.click = function(){ alert("Hello there!"); }; }); myApp.directive('testInput',function(){ return { ...

javascriptangularjs

Exploring AngularJS: Retrieving data based on a specific ID from a JSON document

Within my controller class, I extract the ID of a specific user from the URL and pass it on to the OrderService. My goal now is to fetch the data associated with this ID from a JSON file. How can I accomplish this task? OrderCtrl 'use strict'; ...

javascriptangularjsjsonmodel-view-controller

Getting the desired value from a CreatableSelect in React can be achieved by following these steps:

I have a form that includes a React library component called React Select. I'm struggling to retrieve the target value of this input field. Here's my code snippet: # CreatableSelect tag <CreatableSelect className={Astyle.selectInput} i ...

javascriptreactjsnext.js

How to use AJAX to pass a JavaScript variable to a PHP script for storage in a database

My Objective: I currently have an HTML5 game integrated into my website. You can check out the game here. Now, I want to add a feature that records and displays high scores for this game on the same page. For instance, let's say I play the game as "C ...

javascriptphpjqueryajaxhtml

Using ReactJS to activate child components from a parent component

I am working on a parent component that functions as a Form in my project. export default class Parent extends Component{ submitInput(event){ ...calling Children components } render(){ ...

javascriptformsreactjscomponents

Having trouble displaying the collection data from firebase using React

I am having an issue retrieving a collection from firebase and then using a map function to loop through the documents and render some UI elements. The data is correctly logged in the console at line 20, however, the map function doesn't seem to be wo ...

javascriptreactjsfirebasegoogle-cloud-firestore

Having trouble with submitting the code - need help resolving the issue

I'm facing an issue with my submit cancel code. The JavaScript code I implemented for preventing the submission function on my page isn't working as expected. While it does work to a certain extent, it's not fully functional. I am seeking a ...

javascriptc#jqueryhtmlasp.net

Guide on switching the theme color in c# aspnet core using a toggle button within a partialview

Description I am looking to change the color scheme of my Bootstrap 5.3 theme by clicking a button within a partial view. The toggle button is customized to meet my specific requirements, and the chosen value is stored in a cookie for future reference. ...

javascriptc#asp.net-mvcasp.net-corebootstrap-5

In JavaScript, I aim to decompress a zip file containing binary data by unzipping it

let resourceUrl = "http://localhost:9996/api/GetZipFile?id=1-1" ; $.ajax({ url: resourceUrl, type: 'GET', contentType: 'application/json', success: function (data) { if (data) { // The 'data&apos ...

javascriptangularjs

Step-by-step guide on programmatically activating a radio button

I am working with a radio button and input field. I need the ability to programmatically toggle the radio button so that when this.iAreaOfCoverageForThresholdPasser.average-height is set to true, the radio button appears highlighted. Snippet of HTML: < ...

javascripthtmlangulartypescript

Unresponsive radio buttons in React failing to display as checked

My child component is designed to receive props from a parent. Within the child component, there are radio buttons that render like this: <div> <div className="radio"> <label> <input type="radio ...

javascriptreactjs

Tips for optimizing re-rendering in Redux when a single state changes to avoid unnecessary updates in other components

I recently completed a React project that utilizes Redux for state management. In this project, I have implemented two different states stored in the same reducer and accessed by separate components. However, I've encountered an issue where changing t ...

javascriptreactjsreduxrender

Is there a viable substitute for websockets that can be utilized on shared hosting platforms?

Are there any viable alternatives for websockets that can be used with shared hosting? While I'm aware of node.js, socket.io, and Express.js, I'm unable to use them in a shared hosting environment. If there are other options available for creatin ...

javascriptphpajaxreal-time