"Downloading an image from an encoded base64 canvas triggers an error due to exceeding the maxUrlLength

I'm using javascript to create a canvas drawing on my webpage and then convert it into a base64 image format. After that, I encode the URL of the image to obtain an encoded URL. I came across a post where it was mentioned that using window.location.href on the encoded string can help in downloading the image. I tried using options like window.location.href = img and window.open(img, 'download'), but I keep getting the error message. Can someone please assist me? My main goal is to download the canvas drawing as an image to the server.

Post : Download image which is src attribute (base64)

ERROR : The length of the URL for this request exceeds the configured maxUrlLength value.

<script type="text/javascript">
function loaded() {
    var signature = new ns.SignatureControl({ containerId: 'container', callback: function () {
    }
    });
    signature.init();
}
window.addEventListener('DOMContentLoaded', loaded, false);
function to_image() {
    var canvas = document.getElementById("signatureCanvas");
    document.getElementById("theimage").src = canvas.toDataURL();
    var pngData = canvas.toDataURL("image/png");
    var img = base64_encode(canvas.toDataURL("image/png"))
    //window.location.href = img
    //window.open(img, 'download');
}
function base64_encode(data) {
    // Implementation of base64_encode function
}

Thank you for the helpful edit and response!

Answer №1

To properly display an image on a webpage, make sure to add the correct prefix to the image data before setting it as the value of the window.location.href property.

window.location.href = 'data:image/png;base64,id23gas2fo....

Answer №2

If you want to download the image, you can try the following method:

$('img#imagedownload').attr('src', renderer.domElement.toDataURL("image/png"));
var img = document.getElementById('imagedownload');
var url = img.src.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
window.open(url);

This process will allow you to download the image directly in your current window. Give it a try!

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

Master the art of fetching response data from an API and implementing a function to process the data and generate desired outputs using Node.js and JavaScript

Being new to node.js, javascript, and vue, I attempted to create a Currency Converter by fetching data from an API for exchange rates and performing calculations in a function. Despite successfully obtaining the exchange rates from the selected country in ...

How can I show an item repeatedly with each button click in ReactJS?

Currently, I have a setup where I can display a checkbox and its label upon clicking a button. However, the limitation is that only one checkbox can be displayed at a time. Is there a way to modify this so that I can show multiple checkboxes simultaneous ...

Display the elements of a div at a reduced size of 25% from its original dimensions

I'm currently developing a JavaScript-based iOS simulator that allows users to view their created content on an iPhone and iPad. This involves using AJAX to load the content/page into the simulator, but one issue is that the simulator isn't life- ...

"Enhance your Vue 3 experience with a stylish Instagram Feed featuring

Struggling to retrieve the most recent Instagram posts from a feed using Vue 3 and Axios due to Instagram's strict-origin-when-cross-origin policy causing constant blocks. All access tokens are properly configured. The Instagram Basic Display API gui ...

Tips for using parsley on a dynamically loaded webpage

I'm encountering an issue with applying validation for a datepicker in AJAX loaded content. The validation doesn't seem to work for the loaded content. Can someone please assist me with this? /Script/ function applyValidationForDatepicker(feest ...

I am having difficulty retrieving the user's IP address in VueJs

Here is the code snippet: Vue.mixin(windowMixin) export default { name: "App", methods: { getIpAddress(){ localStorage.getItem('ipAddress') ? '' : localStorage.setItem('ipAddress&apos ...

npm was unable to locate the module named '../lib/npm.js'

Struggling with setting up nodejs and npm on a CentOS 7 machine without internet access. I tried copying the node-v6.2.1-linux-x64 folder with some lib modules to the machine, but it's throwing an error saying Error: Cannot find module '../lib/np ...

Discovering the geographical location of all users using Node.js: A step-by-step guide

My current task involves determining the geoip location of users. I have implemented a code that stores the user's address in the database and then displays the geoip location accordingly. However, if a user changes their location and logs in from a d ...

What could be causing my table to appear multiple times in the HTML when using jQuery?

Using Jquery to dynamically return a list of products, render it as HTML, and show it on the page using $(selector).html(html), I've encountered an issue. When adding products to the cart too quickly, which triggers the rendering of the cart again, th ...

The JSON output from the gapi (Google Analytics) array in PHP is not displaying any values

I've been utilizing the gapi class within a CodeIgniter website. The implementation I'm using is based on this resource, which returns an array that functions perfectly. To pass this array to my JavaScript, I've been attempting the following ...

Issue with jQuery centering in IE browsers with jquery-ui-1.10.3.custom.js and jquery-ui-1.9.2.custom.js not working as expected

Are there any other alternatives you can recommend? Here is the dialog structure: <div id="dialogbox" title="message box"> <p>example content</P> </div> ...

What are the best practices for utilizing ESM only npm packages alongside traditional npm packages within a single JavaScript file?

Hey there, I'm fairly new to web development and I encountered a problem when trying to require two packages, franc and langs, in my index.js file. It turns out that franc is now an ESM only package, requiring me to import it and mention type:module i ...

A guide on leveraging console.log in Next.js

I'm having trouble displaying the output of an API call using console.log. The issue is that nothing appears in the console (both in the browser and Visual Studio Code). The only console.log that seems to work is within the RouteStatus function, but i ...

Encountering issues with SignInWithRedirect feature's functionality

Whenever I attempt to SignInWithRedirect in my React project, I am redirected to a Google site where I only see a blue progress bar at the top before quickly being redirected back to my website. My intention is to be shown my Google sign-in options, but it ...

Check if the provided arguments in JavaScript are arrays and, if they are, combine them into a single large array

My array variables are as follows: const gumBrands = ['orbit', 'trident', 'chiclet', 'strident']; const mintBrands = ['altoids', 'certs', 'breath savers', 'tic tac']; Presen ...

Assistance with JSONP (Without the use of jQuery)

I've been putting in a lot of effort trying to understand how to make a JSONP request, but all the reference materials I find are full of jQuery examples. I can go through the jQuery source code, but I prefer a straightforward and simple example. I&ap ...

Is it possible to call componentDidMount() multiple times in React?

I am in the process of converting an HTML API to ReactJS. The original HTML API is as follows: <script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3199e8f198aff9d5aff73000faae6608"></script> <script> var mapContainer = document.getE ...

Is there a way to update the data on a view in Angular 9 without the need to manually refresh the page?

Currently, I am storing information in the SessionStorage and attempting to display it in my view. However, there seems to be a timing issue where the HTML rendering happens faster than the asynchronous storage saving process. To better illustrate this com ...

Observing and showing profound modifications in Vue

I need to show a distinct message for each category that the user selects <v-select multiple style="position: relative; top: 20px;" color="white" v-if="count == 3 && question" solo placeholder="Please Cho ...

Merge a dropdown menu with an alphabetically arranged list that is interactive with clickable options

I am still learning HTML and Javascript but I'm doing my best. Currently, I am facing a challenge where I need to create a button that, when clicked, opens a dropdown menu containing a table of data. The user should then be able to select a number fr ...