Save image as base64, or alternatives?

Question

Hi all! I added a custom drag-and-drop function to my questions (finally). I want to save what the final position of the dragged images looks like, and it would be ideal if I could save it as an image. One way I saw this is that I could save the image as base64 encoding and decode it later to get the image. I can do this in console printing, however it won’t save as embedded data to my survey. I have the HTML code, JS code (which is where I set up the image saving), and the error below. The error seems to be due to Qualtrics thinking that the image is not coming from Qualtrics, but this is the url from the image library! Error:E API Error: SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. at saveFinalImage (eval at (jfeLib.fa2484b7040929bdf0ac.min.js:2:125561), :81:28) at A.i.eval (eval at (jfeLib.fa2484b7040929bdf0ac.min.js:2:125561), :89:4) at A.i. (jfe.f9dd9f5e15c3385f2b68.min.js:2:268179) at A.i.r (jfeLib.fa2484b7040929bdf0ac.min.js:2:29148) at A.i.s (jfeLib.fa2484b7040929bdf0ac.min.js:2:29191) at s (jfeLib.fa2484b7040929bdf0ac.min.js:2:28461) at A.i._trigger (jfeLib.fa2484b7040929bdf0ac.min.js:2:30008) at A.i.r [as _trigger] (jfe.f9dd9f5e15c3385f2b68.min.js:2:359422) at A.i. (jfe.f9dd9f5e15c3385f2b68.min.js:2:267208) at jfe.f9dd9f5e15c3385f2b68.min.js:2:372392 ƒ () { saveFinalImage(); const tomorrowCoordinates = document.getElementById("tomorrowB1-coordinates").value; const yesterdayCoordinates = document.getElementById("yesterdayB… HTML:

JS:Qualtrics.SurveyEngine.addOnload(function () { // Ensure the script only runs for the visible question if (this.getQuestionContainer().style.display !== "none") { let draggingElement = null; let offsetX = 0; let offsetY = 0; const container = document.getElementById("image-containerB1D"); // Add drag-and-drop functionality document.querySelectorAll('img').forEach(function (img) { img.addEventListener('mousedown', function (event) { draggingElement = img; offsetX = event.clientX - img.getBoundingClientRect().left; offsetY = event.clientY - img.getBoundingClientRect().top; // Set a high z-index while dragging to ensure it's on top img.style.zIndex = 1000; document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); }); }); function onMouseMove(event) { if (!draggingElement) return; const containerRect = container.getBoundingClientRect(); // Calculate the new position let left = event.clientX - containerRect.left - offsetX; let top = event.clientY - containerRect.top - offsetY; // Prevent dragging outside the container left = Math.max(0, Math.min(left, containerRect.width - draggingElement.offsetWidth)); top = Math.max(0, Math.min(top, containerRect.height - draggingElement.offsetHeight)); // Update position draggingElement.style.left = left + "px"; draggingElement.style.top = top + "px"; } function onMouseUp() { if (!draggingElement) return; // Update the hidden input for the dragged element const hiddenInput = document.getElementById(draggingElement.id + "-coordinates"); if (hiddenInput) { hiddenInput.value = draggingElement.style.left.replace("px", "") + "," + draggingElement.style.top.replace("px", ""); } // Reset z-index after dragging draggingElement.style.zIndex = 10; draggingElement = null; document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); } // Save image as embedded data function saveFinalImage() { const container = document.getElementById("image-containerB1D"); if (!container) return; const containerRect = container.getBoundingClientRect(); const canvas = document.createElement('canvas'); canvas.width = containerRect.width; canvas.height = containerRect.height; const ctx = canvas.getContext('2d'); // Draw all images onto the canvas at their current positions document.querySelectorAll('#image-containerB1D img').forEach(function (img) { const rect = img.getBoundingClientRect(); const imgLeft = rect.left - containerRect.left; const imgTop = rect.top - containerRect.top; ctx.drawImage(img, imgLeft, imgTop, img.width, img.height); }); // Convert the canvas to a base64 image const imageUrl = canvas.toDataURL('image/png'); // Store base64 image in Embedded Data Qualtrics.SurveyEngine.setEmbeddedData("finalImage_1", imageUrl); } // Save coordinates on page submission Qualtrics.SurveyEngine.addOnPageSubmit(function () { saveFinalImage(); const tomorrowCoordinates = document.getElementById("tomorrowB1-coordinates").value; const yesterdayCoordinates = document.getElementById("yesterdayB1-coordinates").value; // Save coordinates into Embedded Data fields Qualtrics.SurveyEngine.setEmbeddedData("tomorrowCoordinates", tomorrowCoordinates); Qualtrics.SurveyEngine.setEmbeddedData("yesterdayCoordinates", yesterdayCoordinates); }); }});

ahmedA · Accepted Answer

Everything looks fine. I would just recommend moving yoursaveFinalImage(); to the mouseup event. As you are calling it on page submit, its possible that the data processing is taking some time and therefore the page is moving on without storing the img url.

ahmedA · Answer

Add this to your JS:Qualtrics.SurveyEngine.addOnReady(function () {document.querySelectorAll("img").forEach((item) => item.setAttribute("crossOrigin", "anonymous"));});

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded