小编Kai*_*Kai的帖子

我正在尝试在画布上显示图像。图像托管在 S3 上。

CORS 是在 AWS 上设置的，并且在脚本中CrossOrigin设置了该属性anonymous。

在 Firefox 上一切正常——但在 Chrome 和 Safari 上无法加载图像。

错误Safari：

Access-Control-Allow-Origin 不允许Origin https://www.example.com。 http://mybucket.s3.amazonaws.com/bubble/foo.PNG

[错误] 无法加载资源：Access-Control-Allow-Origin 不允许Origin https://www.example.com。（foo.PNG，第 0 行）

跨源资源共享策略拒绝跨源图像加载。

错误铬：

CORS 策略已阻止从源“null”访问“ https://mybucket.s3.amazonaws.com/bubble/foo.PNG ”上的图像：没有“Access-Control-Allow-Origin”标头存在于请求的资源。因此，不允许访问 Origin 'null'。

CORS 配置非常标准。我尝试了<AllowedOrigin>*</AllowedOrigin>，以及其他一些变体，但没有任何区别……只有一个例外：<AllowedOrigin>null</AllowedOrigin>似乎适用于 Chrome。

AWS 上的 CORS 配置

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>https://www.example.com</AllowedOrigin>
    <AllowedOrigin>http://www.example.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>

画布脚本

let myImage = new Image();
myImage.setAttribute('crossOrigin', 'anonymous');

myImage.src = thisDocument.url;
myImage.onload = function() {
  canvas = document.getElementById('myCanvas'); …

我正在尝试使用cfs:graphicsmagick包来生成缩略图,但生成的所有内容都是空图像.

当我启动服务器时,事情看起来很好:

I20150108-10:43:14.698(-8)? => GraphicsMagick found
I20150108-10:43:14.901(-8)? available
=> Meteor server restarted

但似乎gm不可用:

if (gm.isAvailable) {
    console.log("gm is available");
}

并且控制台抛出一个错误:

Uncaught TypeError: Cannot read property 'isAvailable' of undefined

如何将图像二进制文件直接上传到数据库？我读到只有较大的文件才需要GridFS.

我的意见:

<template name="pixUpload">
    <input type="file" name="myFile" class="myPixInput">
</template>

和模板:

Template.pixUpload.events({
    'change .myPixInput': function(event, template) {
        event.preventDefault();
        var pixBinaryVar = event.target.myFile.value;
        MyPix.insert({
            binary: pixBinaryVar;
        })
    }
})

它不起作用,我得到一个错误,没有定义该值.为什么？