Question

这里很快就需要帮助。尝试制作一个小的JavaScript程序来帮助某人进行演示。信不信由你，他的电脑几乎会死于MS Power Point和Libre Office，因为ppt就是那么大。

我一直在编写一个包含大量页面的样本来与Chrome一起使用，并且它是以某种方式制作的，以便将页面分成两半，其中一边是canvas，主要演示文稿，另一个是较小的canvas，每次转换后都显示第一个canvas（通过ctx2.drawImage(canvas1,0,0);）的副本。

现在，第一次运行这个我当然遇到了CORS错误的问题。我为每个图片.crossOrigin = "Anonymous"提供了一个，然后我使用--allow-file-access-from-files运行Chrome。这使得我的计算机（Win10 Home和Ubuntu 16.04）都可以正常工作，但是一旦我发送给我的朋友这个包并且他使用--allow-file-access-from-files运行它，就会出现CORS错误。

Access to image at 'file:///D:/.../image2.png' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.

我知道很多人会说它上传到服务器，但是我们不能保证他去的地方有互联网连接，因此本地包＆＃34;。他的Chrome是最新的（64.0.3282.186官方构建64位），因为我的（Win10相同数字但32位，Ubuntu 56.0.2924.87 64位）。我可以使用哪些其他选项来绕过CORS安全性？最好是作为命令行切换放入bat文件或html文件中的某些内容，而不是让他将笔记本电脑变成网络服务器或编译内容。

编辑：按照Kosh的要求，这里是＆＃34;极简主义＆＃34;。

＆＃13;

var canvas1;
var canvas2;
var ctx1;
var ctx2;
var img = [];

	onload = function()
	{
		canvas1 = document.getElementById("display1");
		ctx1 = canvas1.getContext("2d");
		canvas2 = document.getElementById("display2");
		ctx2 = canvas2.getContext("2d");
		img[0] = new Image();
		img[0].crossOrigin = "Anonymous";
		img[0].onload = function()
		{
			ctx1.drawImage(img[0],320-(img[0].width/2),240-(img[0].height/2));
			ctx2.drawImage(canvas1,0,0);
		}
		img[0].src = "image2.png";
	}

＆＃13;

<canvas id="display1" width="640px" height="480px"></canvas>
<canvas id="display2" width="640px" height="480px"></canvas>

＆＃13;

将其复制到您自己的html文件，并提供您自己的image2.png。

本地文件系统中的交叉起源

0 个答案: