Qualtrics问卷中保存参与者生成的多张视频截图的技术咨询

我来帮你搞定在Qualtrics里存储参与者生成的多张视频帧截图的问题！结合你已经实现的视频展示和截图功能，这里有两种靠谱的方案，你可以根据需求选择：

方案1：将图片转为Base64存储到嵌入式数据（最简便） #

Qualtrics的嵌入式数据（Embedded Data）可以存储文本内容，我们可以把每张截图转成Base64编码的字符串，存在隐藏的嵌入式字段里，后续导出数据后再还原成图片。

具体步骤： #

1. 在Qualtrics中创建嵌入式字段

   • 进入问卷的「Survey Flow」，添加「Embedded Data」元素，创建比如AllScreenshots（用来存所有截图的JSON数组），或者多个字段如Screenshot1、Screenshot2对应单张截图。记得把这些字段设置为允许后续修改。

2. 修改你的JavaScript代码，把截图转成Base64并存储
   假设你已经用Canvas生成了截图（大部分前端截图逻辑都是基于Canvas的），可以用toDataURL()方法把Canvas内容转成Base64：

   // 假设你的截图Canvas元素是canvasEl
   const base64Image = canvasEl.toDataURL('image/jpeg', 0.8); // 第二个参数是压缩质量，0-1之间，可减小体积
   
   // 如果是单张截图，直接存到对应字段
   Qualtrics.SurveyEngine.setEmbeddedData('Screenshot1', base64Image);
   
   // 如果是多张截图，先存在数组里，再转成JSON字符串存储
   // 先初始化数组（可在问卷加载时执行）
   if (!window.screenshotArray) {
     window.screenshotArray = [];
   }
   window.screenshotArray.push(base64Image);
   // 把数组转成JSON存到嵌入式字段
   Qualtrics.SurveyEngine.setEmbeddedData('AllScreenshots', JSON.stringify(window.screenshotArray));
   

3. 注意事项

   • Qualtrics的嵌入式数据字段有长度限制（单字段约支持1MB文本），所以建议用JPEG格式并调整压缩质量来减小Base64字符串的大小。
   • 导出数据后，你可以把Base64字符串复制到在线工具或自己写脚本还原成图片。

方案2：通过Qualtrics API上传图片到文件库（适合直接在Qualtrics查看） #

如果你希望直接在Qualtrics的文件库中看到这些截图，可以调用Qualtrics的Files API来上传，不过这个方法需要API权限，更适合内部使用的问卷。

具体步骤： #

1. 获取Qualtrics API凭证

   • 登录Qualtrics，进入「Account Settings」→「Qualtrics IDs」获取你的Data Center ID和Survey ID；
   • 进入「API Keys」生成一个有「Create Files」权限的API Token。

2. 修改JS代码，实现截图上传
   先写一个Base64转Blob的工具函数，然后用Fetch调用API上传：

   // Base64转Blob函数
   function base64ToBlob(base64Str) {
     const [metaStr, dataStr] = base64Str.split(',');
     const mime = metaStr.split(':')[1].split(';')[0];
     const byteString = atob(dataStr);
     const ab = new ArrayBuffer(byteString.length);
     const uint8Array = new Uint8Array(ab);
     for (let i = 0; i < byteString.length; i++) {
       uint8Array[i] = byteString.charCodeAt(i);
     }
     return new Blob([ab], { type: mime });
   }
   
   // 上传截图的函数
   function uploadScreenshotToQualtrics(base64Image) {
     const blob = base64ToBlob(base64Image);
     const formData = new FormData();
     formData.append('file', blob, `participant-screenshot-${Date.now()}.png`);
   
     fetch('https://YOUR_DATACENTER_ID.qualtrics.com/API/v3/files', {
       method: 'POST',
       headers: {
         'Authorization': 'Bearer YOUR_API_TOKEN',
         'Accept': 'application/json'
       },
       body: formData
     })
     .then(res => res.json())
     .then(data => {
       // 把上传后的文件ID存到嵌入式数据，方便后续查找
       Qualtrics.SurveyEngine.setEmbeddedData('LatestScreenshotFileID', data.result.id);
     })
     .catch(err => console.error('上传失败:', err));
   }
   
   // 调用上传函数（在生成截图后执行）
   uploadScreenshotToQualtrics(base64Image);
   

3. 注意事项

   • 客户端直接调用API会暴露你的API Token，所以如果是公开分发的问卷，建议通过自己的后端服务器中转（先把截图发送到你的服务器，再由服务器调用Qualtrics API上传），避免Token泄露。
   • 上传的图片会出现在Qualtrics的「Files Library」里，你可以通过存储的FileID快速定位。

测试建议 #

不管用哪种方案，都先在Qualtrics的预览模式下测试：

• 生成截图后，查看嵌入式数据是否正确存储了内容；
• 如果用API方案，打开浏览器控制台看是否有上传成功的返回信息。

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