Transmitting data of a substantial size across different origins

I developed a JavaScript bookmarklet that generates a screenshot of an element and stores it as a base64 encoded string.

However, I am faced with the challenge of sending this image/string to my server for storage because it consists of over 6000 characters, approximately 61 KB in size, which makes it impractical to transmit it back using a GET request.

Is there a third-party service available that could assist in retrieving the image on my server? What is the best approach for transmitting this image to my server?

javascriptajaxcross-domainhtml2canvas

Answer №1

To submit data, consider using the POST method.

One option is to use JavaScript to generate a form and then send the data via a post request. If you prefer not to change the page location, you can set the form's target attribute to a hidden iframe.

If you require a response from the server after the post, include a unique key in the form that you're posting, such as 

<input type="hidden" name="key" value="...">
. Afterwards, utilize JSONP to retrieve the response by making a call to 
http://yourserver.com/donepost.php?key=...
. It's important to note that since the completion of the post cannot be guaranteed before the JSONP call, you may need to continuously check the server for a valid response or until it times out.

Alternatively, you can use AJAX to handle the post request. Make sure to configure the Access-Control-Allow-Origin header on your server to permit this method.

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

Error 16 occurred when attempting to ngUpgrade two different versions of Highcharts

After successfully upgrading my app to use ngUpgrade, I encountered an issue while trying to incorporate Highcharts. In the original version of the app, there was an older version of Highcharts designed for AngularJS. However, in the new hybrid app using ...

javascriptangularhighchartsng-upgrade

Grouping an array of arrays of objects

I am trying to group an array of objects based on the value of the first item below: const data = [{"value":"value1","metric":1},{"value":"value1","metric":2},{"value":"value3","metric":0},{"value":"value2","metric":4},{"value":"value3","metric":1},{"va ...

javascriptjsongroup-by

Custom HTML select element not triggering the onchange event

I found a code snippet on https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select that demonstrates a custom select input with an onchange event. However, I am facing an issue where the onchange event does not get triggered when I change th ...

javascripthtmlcss

What's causing this sluggish performance?

I'm in the process of developing a Google Chrome extension and I can't help but wonder why window.onload = loadPage; function loadPage() { document.getElementById('nav-robux-amount').innerHTML = '0'; console.log(" ...

javascriptroblox

Displaying overlay when sidebar menu is expanded

I am working on creating a smooth overlay transition for when the sidebar menu opens and closes. When the overlay is clicked, I want the menu to close. This is what I have so far: $(document).ready(function() { $('#menu-toggle').click(fun ...

javascriptjqueryhtmlcsstwitter-bootstrap

The function slice is not a method of _co

I'm attempting to showcase the failedjobs array<any> data in a reverse order <ion-item *ngFor="let failjob of failedjobs.slice().reverse()"> An issue arises as I encounter this error ERROR TypeError: _co.failedjobs.slice is not a fu ...

javascriptangularionic2ionic3

To remove, simply double-click on the jQuery duplicate element

I am looking to implement the feature of deleting a cloned helper object by double-clicking on it. Below is the javascript code I currently have: $(document).ready(function(){ $(".draggable").draggable({ helper: 'clone', sta ...

javascriptjquery

Rails with Ajax: The destroy.js.erb file has been rendered successfully, but the specific div element identified by its id is not being successfully

Trying to implement a feature where users can click an unfollow button to end a friendship using ajax. However, the div does not disappear even though the console indicates that destroy.js.erb was rendered successfully. The expected outcome is for the reco ...

javascriptjqueryruby-on-railsajax

Is there a way for me to retrieve the information sent in a jQuery Ajax request?

I'm struggling to understand how to retrieve a value previously submitted to a PHP file using AJAX and jQuery. I'm still in the early stages of learning jQuery, so some concepts are challenging for me. Below is my jQuery code: $('#button2& ...

phpjavascriptjqueryajax

What is the best way to pass the second variable to the Vue Laravel component and have it automatically set to the input variable by default?

I'm new to learning Vue and I'm wondering how to pass 2 values to my component. Can you help me with my code? <div id="js-autocomplete-region"> <autocomplete-region-component :query-prop="{{ json_encode(old('regionName', $ ...

javascriptphplaravelvue.js

Continuously encountering a Login Required message while attempting to upload a file on Google Drive

I am currently developing a chrome extension that is designed to intercept specific downloads, like .doc and .docx files, and automatically upload them to a designated folder in Google Drive. Below is the manifest for this extension: { // Manifest det ...

javascriptgoogle-chrome-extensiongoogle-drive-apigoogle-chrome-appdrive

Enhance User Experience with a Customized Progress Bar using Google Apps Script

I created a Google Sheets cell counter in Apps Script and need help setting up the bootstrap progress bar using the "percentage" variable. GS function cellCounter() { var ss = SpreadsheetApp.getActiveSpreadsheet(); var sheets = ss.getSheets(); var ...

javascriptgoogle-apps-scriptgoogle-sheetsbootstrap-4

Load Jquery Ajax every second interval

I discovered this script on the W3 school website. <script> $(document).ready(function(){ setInterval(function(){ $("#div1").load("demo_test.txt"); }, 30000); // Load demo_test.txt every 30 seconds }); </script> The purpose of ...

javascriptjqueryhtmlajax

Connect the plotly library to interact with the data in a Vue.js application through

I'm currently working on a project that involves using vue.js and the plot.ly JavaScript graph library. I am trying to figure out how to bind "pts" to the data's "TestSentences" in Vue. Below is my code snippet, thanks to everyone who has provide ...

javascriptvue.jsplotly

Setting up a functionality for a PHP-generated select option

When the main select tag "category" is changed, it triggers a PHP script to display a new select tag: <select id="category" onchange="showme(this);"> <option value="txt">text</option> <option value="img">image</ ...

javascriptphphtmlajax

Struggling to locate the text and modify the anchor tag using HTML

I am currently working with the following javascript code inside a div. I am attempting to locate and replace an entire a tag with a new type of a tag. This is the HTML that I have: <div class="info-more"><h3>We're here to help!</h3&g ...

javascriptjquery

Exploring the intricacies of handling exceptions in the service layer with Spring and Angular JS

Our team of developers is currently working on an application that utilizes jasper-reports 6.2.0, spring-mvc 3.2.14, java-ee-7, tomcat 8, and angularjs in the front-end. All our rest requests are made using ajax. The application is designed to receive JSO ...

javaangularjsjsonajaxspring-mvc

Error message saying "Jquery/Ajax Variable is undefined"

Whenever I try clicking the button, an error pops up saying "popup is not defined." I have no clue what to do. <input href="#dialog" type='button' value='Open' onclick="popup(<?php echo $image['image_id']; ?>); retur ...

jqueryajax

hiding the search box by clicking away from it

Can someone help me with modifying this search box design? @import url(http://weloveiconfonts.com/api/?family=entypo); /* entypo */ [class*="entypo-"]:before { font-family: 'entypo', sans-serif; color: #C0C0C0; } * { margin: 0px; pad ...

javascriptcss

What is the best way to structure a data object in Javascript or VueJs?

As I work on developing a small application using VueJs, the data I receive is structured in a particular format: { "interactions":[ { "id":14, "user_id":1, "schedule":"2017-06-04 05:02:12", "typ ...

javascriptvue.jsvuejs2