Question

设置1

    <croppa
      v-model="imgData"
      placeholder="Upload Picture"
      :accept="'image/jpeg,image/jpg,image/png'"
      :quality="1.5"
      :width="$vuetify.breakpoint.xs ? 130 : 150"
      :height="$vuetify.breakpoint.xs ? 130 : 150"
      @image-remove="onImageRemoved()"
      @new-image-drawn="onNewImageDrawn()"
      @move="onMove()"
      @zoom="onZoom()"
    >
      // next line is only shown if there's an initial image to show but also gets
      // hidden by croppa and replaced by another image-element once imgData exists
      <img v-if="initialUrl" slot="initial" src="initialUrl">
    </croppa>

问题1 使用设置1，我最终在本地选择新图片（用户可以上传新的个人资料图片）并尝试从图像数据生成generateBlob以便稍后将其保存在服务器上时遇到Tainted canvases may not be exported.错误。

设置2 在crossorigin="anonymous"前面添加:src="initialUrl"

问题2 使用设置2，我最终在从Firebase存储中存储和加载的图像的初始加载中遇到了No 'Access-Control-Allow-Origin' header is present on the requested resource.错误。图像在那里，但是无法通过img元素显示。否则，firebase文件的问题为零，因此我没有尝试为此尝试CORS策略，更改服务器上的设置。

您知道如何解决该问题吗？有趣的是，我让它在设置1中工作了一段时间，没有任何问题，但是经过一些更改之后我无法完全重现，现在它已经停止了。

编辑：

用例说明：

当前照片（如果存在）从Firebase存储中加载并渲染
- 如果使用设置1，则没有问题
- 如果使用设置2（带有crossorigin="anonymous"），则描述了CORS错误
用户通过在本地选择照片来替换现有照片或添加其第一张照片客户端。在他真正单击“保存”之前，什么都没有发送到服务器
所选照片将绘制到浏览器（v-model="'imgData"）
当用户单击“保存”时，我呼叫imgData.generateBlob(blob => { ... }, 'image/jpg', 0.8)
- 触发设置1 /问题1中的tainted canvas错误
- 在设置2中不会触发任何错误

到目前为止，与服务器的唯一连接是初始获取当前照片（如果存在）

编辑2

肯定是与Croppa有关（仅此问题）。以下代码可以完美运行（忽略UI），包括加载现有照片（在中），选择/渲染新照片（在croppa框架中），在服务器上对其进行更新，然后重新加载页面以再次在：

<croppa
  v-model="imgData"
  placeholder="Upload Picture"
  :placeholder-font-size="15"
  :prevent-white-space="true"
  :accept="'image/jpeg,image/jpg,image/png'"
  :quality="1.5"
  :width="$vuetify.breakpoint.xs ? 130 : 150"
  :height="$vuetify.breakpoint.xs ? 130 : 150"
  @image-remove="onImageRemoved()"
  @new-image-drawn="onNewImageDrawn()"
  @move="onMove()"
  @zoom="onZoom()"
>
</croppa>
<img :src="initialUrl">

意味着仅在 initial 图像被加载/包装在croppa中时，问题才存在（显然，这是首选，因为它显示在给定的帧中而不是在其旁边）。上面的代码有效，尽管从未在croppa帧中显示初始图像，而是在其旁边显示为单独的图像。

同样，croppa文档建议添加crossorigin="anonymous"，但是Firebase存储会阻止该请求，除非我更改存储设置以允许origin = * / anonymous。

Croppa的帆布或CORS政策出现污点

0 个答案: