我想制作一个关于HTML/JS 同源政策的社区维基,希望能帮助任何人搜索这个主题.这是SO上搜索次数最多的主题之一,没有统一的wiki,所以我去:)
相同的源策略可防止从一个源加载的文档或脚本从另一个源获取或设置文档的属性.此政策可以追溯到Netscape Navigator 2.0.
请保持示例详细,最好还链接您的来源.
我想将彩色图像更改为灰度,但是当我尝试使用getImageData时出现安全性错误.
Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
我知道这个错误已经到处讨论过,但没有一个有明确的解决方案.请帮忙!
<html>
<script>
function grayscale()
{
var myCanvas = document.getElementById("c1");
var myCanvasContext = myCanvas.getContext("2d");
var img = document.getElementById("myImage");
img.crossOrigin = "anonymous";
var imgWidth = img.width;
var imgHeight = img.height;
myCanvas.width = imgWidth;
myCanvas.height = imgHeight;
myCanvasContext.drawImage(img,0,0);
var imageData = myCanvasContext.getImageData(0,0, imgWidth, imgHeight);
for (j=0; j<imageData.height; i++)
{
for (i=0; i<imageData.width; j++)
{
var index=(i*4)*imageData.width+(j*4);
var red=imageData.data[index];
var green=imageData.data[index+1];
var blue=imageData.data[index+2];
var alpha=imageData.data[index+3];
var …我正在使用THREE.js,我在开发者控制台中收到此错误:
Cross-origin image load denied by Cross-Origin Resource Sharing policy.
当我用Chrome打开我的脚本时.代码如下所示:
var particle_system_material = new THREE.ParticleSystemMaterial({
color: 0xffffff,
map: THREE.ImageUtils.loadTexture("images/circle.png"),
});
所以你可以猜到:
map: THREE.ImageUtils.loadTexture("images/circle.png");
是问题.使用Firefox,它可以很好地工作.
我已经阅读了以下链接中的提示: Chrome,three.js:交叉原始图像加载被拒绝, https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally, https://www.google.fr/search?q=Access-Control-Allow-Origin
我也意识到了给出的命令:
使用命令行标志启动Chrome可执行文件:
chrome --allow-file-access-from-files
什么都行不通,我疯了.它只是我硬盘上的一个图像,包含HTML和JS文件,没有服务器,没有"原点".
我正在尝试使用 FabricJs 制作 T 恤定制器。
但每次我尝试将画布转换为 Base64
$('#frontCanvas')[0].value = $('canvas')[0].toDataURL("image/png")
我收到此错误：
SecurityError：操作不安全。
我确信与 crossOrigin 有关，但我不知道如何将其添加到我的脚本中。
我尝试了很多不同的方法，但没有成功。
任何帮助将不胜感激。
谢谢你！
$scope.loadImage = function (source) {
var opacity = (function (min, max) {
return Math.random() * (max - min) + min;
})(0.5, 1);
fabric.Image.fromURL(source, function (image) {
image.set({
left: 100,
top: 100,
angle: 0,
padding: 10,
cornersize: 10,
hasRotatingPoint: true
});
//image.scale(getRandomNum(0.1, 0.25)).setCoords();
canvas.add(image);
});
};