我正在使用 Parse.com 为移动应用程序存储图像文件。图像被正确存储和检索。问题是当图像被添加到 FabricJS Canvas 时, Canvas 被标记为“受污染”,因此无法保存(使用 canvas.toDataURL)。
我尝试添加“crossOrigin”选项:
fabric.Image.fromURL( ... parse.com url .. , function(img) {
img.set({
left: 10,
top: 10
});
$scope.canvas.add(img);
$scope.canvas.setActiveObject(img);
}, { "crossOrigin" : "anonymous" } );
但是这返回了错误:
Image from origin 'http://files.parsetfss.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8888' is therefore not allowed access.
我找不到在 Parse.com 中添加上述 header 的方法。我也无法实现代理服务器,因为这是使用 Parse.com 的全部意义所在。
非常感谢您的帮助,谢谢。
最佳答案
使用 Parse.com“Cloud Code”找到了解决方案。步骤如下:
- 在 Parse.com 中,创建一个代理服务器(用 Express 编写)。此代理服务器添加 CORS header 。
// These two lines are required to initialize Express in Cloud Code. var express = require('express'); var app = express(); // Global app configuration section app.set('views', 'cloud/views'); // Specify the folder to find templates app.set('view engine', 'ejs'); // Set the template engine app.use(express.bodyParser()); // Middleware for reading request body // // Example request: // http://files.parsetfss.com/XXX/YYY // app.get('/images/:tag1/:tag2', function(req, res) { Parse.Cloud.httpRequest({ url: 'http://files.parsetfss.com/' + req.params.tag1 + "/" + req.params.tag2, success: function(httpResponse) { // add CORS headers res.set("Access-Control-Allow-Origin", "*"); res.set("Access-Control-Allow-Headers", "X-Requested-With"); res.set('Access-Control-Allow-Headers', 'Content-Type'); res.send(httpResponse.buffer); }, error: function(err) { console.log(err); res.send('Error finding file'); } }); }); // Attach the Express app to Cloud Code. app.listen();
有关在 Parse.com 上设置 Cloud Code 的更多详细信息,请参见此处:https://parse.com/docs/js/guide#cloud-code
- 更新 FabricJS 调用以将 crossOrigin 设置为“匿名”并将调用重定向到您的代理服务器。
var url = <originalimageurl>; url = url.replace("http://files.parsetfss.com/", "http:\/\/<parsecom-domain>.parseapp.com\/images\/"); fabric.Image.fromURL(url, function(img) { img.set({ left: 10, top: 10 }); $scope.canvas.add(img); $scope.canvas.setActiveObject(img); }, { "crossOrigin" : "anonymous" } );
替换<originalimageurl>
使用存储在 Parse.com 中的原始图像 url。
替换 <parsecom-domain>
使用您在 Parse.com 中的子域。
这将起作用,因为客户端 (FabricJS) 和代理服务器 (Parse.com CloudCode) 支持 CORS。创建的图像将不再被视为跨源,因此 Canvas 不会被污染。最终,现在可以保存 Canvas 了!
我希望这对其他人有帮助。干杯。
关于javascript - Parse.com 和 Fabric.js,如何修复托管图像的 CORS 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31903405/