javascript - 缓存控制和 Canvas 的访问控制问题

Question

我正在尝试使用浏览器 Canvas 来处理我在云端托管的图像。我正在尝试设置 cloudfront 以使浏览器缓存具有缓存控制 max-age 的图像，并且仍然允许 Canvas 编辑这些图像。

这是我可以编辑的图片:

https://d2t4fc8ff77neh.cloudfront.net/cardSrcImage/1ac01l796_16dbmg07t_books2.jpg

这是我无法做到的(来自来源“https://d2t4fc8ff77neh.cloudfront.net”的图片已被跨源资源共享策略阻止加载:请求的资源上不存在“Access-Control-Allow-Origin” header 。因此不允许访问来源“https://localhost”。):

https://d2t4fc8ff77neh.cloudfront.net/cardSrcImage/1ac01o3l0_16dbmg07t_books2.jpg

唯一不同的是缓存控制 header 。怎么了？谢谢。

我正在使用 node.js knox 库上传。标题示例:

var headers = {
  'Content-Length': options.data.length,
  'Vary': 'Accept-Encoding',
  // 'Cache-Control': 'public, max-age=31536000',
  'x-amz-acl': 'public-read',
  'Content-Type': options.type
}

Answer 1

好吧，我假设你只想加载图像而不想将它们保存(POST)回到相同的URI .这有效!

Here是一个适用于两个图像的 jsbin。这是代码:

var img1 = new Image();
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');


//drawing of the test image - img1
img1.onload = function () {
  ctx.drawImage(img1, 0, 0);
};

//img1.src = 'https://d2t4fc8ff77neh.cloudfront.net/cardSrcImage/1ac01l796_16dbmg07t_books2.jpg';
img1.src = 'https://d2t4fc8ff77neh.cloudfront.net/cardSrcImage/1ac01o3l0_16dbmg07t_books2.jpg';

还有 canvas在 HTML 中:

<canvas id="canvas" width="1000" height="1000"></canvas>

所以你的问题可能是你如何加载图像，但你没有向我们展示你的代码。

缓存/跨域问题

您的问题是 <img>标记和 Javascript Image有一个非常不同的行为。您可以使用 <img> 包含来自整个 Internet 的图像。没有任何来源检查的标记，但用于 Javascript Image你的同源政策是活跃的。

在你原来的HTML你有<img>图像的标签。这会使您的浏览器在没有 Origin 的情况下获取图像 header 。这会导致您的服务器不发送 CORS header 。

稍后当您使用 Javascript 时 Image你的浏览器有一个缓存版本没有 CORS header ，并且会用它来响应。所以请求会失败!

有时 chrome 看起来足够智能，可以发出额外的请求，但这绝对不理想。

现在应该很容易解决这个问题。也许首先使用 Image然后是 <img>标签，或者不使用 <img>根本没有标签。您也可以始终发送 * 的 CORS header , 即使没有 Origin header 存在。

---

您的 resizing 中也有一个奇怪的问题功能，但我认为这是一个新问题的内容，如果你不能自己解决它的话。