如何将Qualtrics中保存的Base64图片字符串还原为图片？

我正在查看一份他人在Qualtrics平台创建的问卷，其中设置了让参与者使用摄像头拍摄照片的环节，拍摄的照片以Base64编码的Data URL字符串形式保存（格式开头为data:image/png;base64,iVBORw0KGgo...，字符串长度超30000字符）。现寻求技术支持，帮助将该字符串转换回图片。

问卷中拍照功能的原JavaScript代码 #

Qualtrics.SurveyEngine.addOnload(function() {
  var newName = '③ Continue'; //Update - New Next Button label
  var nb = jQuery('#NextButton');
  nb.val(newName);
  nb.attr('title', newName);

});

Qualtrics.SurveyEngine.addOnReady(function() {
  const player = document.getElementById("player");
  const canvas = document.getElementById("canvas");
  const context = canvas.getContext("2d");

  const captureButton = document.getElementById("capture");
  const discardButton = document.getElementById("discard");
  const uploadButton = document.getElementById("upload");
  let nextButton = document.getElementById("NextButton");

  const constraints = {
    video: true
  };

  nextButton.disabled = true;

  startWebcam();

  captureButton.addEventListener("click", () => {
    // Draw the video frame to the canvas.
    var w = player.videoWidth;
    var h = player.videoHeight;
    canvas.width = 100;
    canvas.height = 150;
    var renderableWidth = w * (canvas.height / h);
    var xStart = (canvas.width - renderableWidth) / 2;
    context.drawImage(player, xStart, 0, renderableWidth, canvas.height);

    captureButton.disabled = true;
    uploadButton.disabled = false;
    discardButton.disabled = false;

    // player.srcObject = canvas.captureStream(); // Not supported in Safari
    canvas.style.display = "block";
    player.style.display = "none";

    localStorage.setItem("verificationImage", canvas.toDataURL());
  });

  function resetPictureTaking() {
    captureButton.disabled = false;
    discardButton.disabled = true;
    uploadButton.disabled = true;

    // player.srcObject = stream;
    canvas.style.display = "none";
    player.style.display = "block";

    localStorage.removeItem("verificationImage");
  }

  discardButton.addEventListener("click", resetPictureTaking);

  uploadButton.addEventListener("click", () => {

    canvas.toBlob(function(blob) {
      const formData = new FormData();
      formData.append("verificationImage", blob);

      dataurl = canvas.toDataURL(formData);
      Qualtrics.SurveyEngine.setEmbeddedData('Pic', dataurl);


      var urllength = dataurl.length;
      var numvars = Math.ceil(urllength / 20000);
      for (var i = 0; i < numvars; ++i) {
        var start = i * 20000;
        var end = Math.min(start + 20000, urllength);
        var substring = dataurl.slice(start, end);
        var str1 = i.toString();
        var str2 = "Pic"
        var name = str2.concat(str1);
        Qualtrics.SurveyEngine.setEmbeddedData(name, substring);
      }

    });

    a = "Pre"
    console.log(a)

    stopWebcam();

    x = "Post"
    console.log(x);

    uploadButton.disabled = true;
    discardButton.disabled = true;
    nextButton.disabled = false;

    b = "Button"
    console.log(b)



  });

  function startWebcam() {
    return navigator.mediaDevices.getUserMedia(constraints).then(stream => {
      // Copy dimensions of video stream to canvas for still image
      const videoTrack = stream.getVideoTracks()[0];
      const videoSettings = videoTrack.getSettings();
      canvas.height = videoSettings.height;
      canvas.width = videoSettings.width;
      localStorage.webcamHeight = videoSettings.height;
      localStorage.webcamWidth = videoSettings.width;

      // Attach the video stream to the video element and autoplay.
      player.srcObject = stream;

      // Activate capture button
      captureButton.disabled = false;
    });
  }

  function stopWebcam() {
    const stream = player.srcObject;
    const tracks = stream.getTracks();

    tracks.forEach(function(track) {
      track.stop();
    });

    player.srcObject = null;
  }


});

Qualtrics.SurveyEngine.addOnUnload(function() {
  /*Place your JavaScript here to run when the page is unloaded*/

});

还原步骤说明 #

注意：原代码中将完整的Base64 Data URL分割成了Pic、Pic0、Pic1...多个字段存储，还原前必须先按顺序拼接这些字段，得到完整的Data URL字符串。

方法一：手动快速还原 #

• 拼接所有Pic开头的字段内容，得到完整的data:image/png;base64,...字符串
• 打开任意浏览器，将完整字符串粘贴到地址栏并回车，浏览器会直接渲染出图片
• 右键点击图片，选择“另存为”即可保存到本地

方法二：前端自动还原代码 #

如果需要在Qualtrics问卷页面内自动还原并下载图片，可以使用以下代码：

// 拼接分割的Base64字段
function getFullDataUrl() {
  const parts = [];
  // 先获取主字段Pic
  let mainPart = Qualtrics.SurveyEngine.getEmbeddedData('Pic');
  if (mainPart) parts.push(mainPart);
  
  // 循环获取分割的子字段，直到找不到为止
  let i = 0;
  while(true) {
    const part = Qualtrics.SurveyEngine.getEmbeddedData(`Pic${i}`);
    if (!part) break;
    parts.push(part);
    i++;
  }
  return parts.join('');
}

// 将Data URL转换为可下载的图片
function downloadImageFromDataUrl() {
  const fullDataUrl = getFullDataUrl();
  if (!fullDataUrl) return;
  
  // 创建下载链接
  const link = document.createElement('a');
  link.download = 'survey-captured-image.png';
  link.href = fullDataUrl;
  // 触发下载
  link.click();
}

// 调用函数执行下载
downloadImageFromDataUrl();

方法三：后端批量处理（Python示例） #

如果需要批量处理问卷中的所有图片数据，可使用Python代码：

import base64
from PIL import Image
from io import BytesIO

def restore_image_from_data_url(data_url, save_path):
    # 分离Base64编码内容（去掉前缀部分）
    _, base64_content = data_url.split(',', 1)
    # 解码Base64字符串
    image_bytes = base64.b64decode(base64_content)
    # 转为图片对象并保存
    with Image.open(BytesIO(image_bytes)) as img:
        img.save(save_path, format='PNG')

# 示例使用：替换为拼接后的完整Data URL
full_data_url = "data:image/png;base64,iVBORw0KGgo..."
restore_image_from_data_url(full_data_url, 'restored_image.png')

内容的提问来源于stack exchange，提问作者afreelunch