尝试使用本地图像而不是 Web 图像来实现rainyday.js答案

【问题标题】：Trying to implement rainyday.js with a local image rather than a web image尝试使用本地图像而不是 Web 图像来实现rainyday.js
【发布时间】：2014-04-07 11:00:19
【问题描述】：

您好，我正在尝试将rainyday.js 实施到我正在从事的项目中，但是我没有使用 Javascript 的经验，所以我很苦恼。

基本上，代码当前调用了一个在线图像（来自 imgur），这工作正常。但是当我尝试调用本地图像时，它不会显示效果，只显示本地图像。

有没有什么简单的方法可以让这段代码调用本地图片而不是网络图片？

代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>rainyday.js</title>
        <link rel="stylesheet" type="text/css" href="../styles/animation.css"/>
        <script src="../misc/jquery.min.js" type="text/javascript"></script>
        <script src="rainyday.min.js"></script>
        <script>
            function run() {
                var image = document.getElementById('background');
                image.onload = function() {
                    var engine = new RainyDay({
                        image: this
                    });
                    engine.rain([ [3, 3, 0.88], [5, 5, 0.9], [6, 2, 1] ], 100);
                };
                image.crossOrigin = 'anonymous';
                image.src = 'http://i.imgur.com/f7bpv.jpg';
            }
        </script>
    </head>
    <body onload="run();">
        <div class="rainWrapper1">
        <img id="background" alt="background" src="" />
        </div>
    </body>
</html>

Github 上的 JS 链接：

https://github.com/maroslaw/rainyday.js/blob/master/rainyday.js

感谢您的帮助！

【问题讨论】：

您的图片网址是什么样的？
好问题：我的图像存储在一个文件夹中，因此图像 url 是 'images/thisisanimage.jpg'

标签： javascript jquery

【解决方案1】：

您在 Firefox 中尝试过吗？它在那里对我有用，但是在 Chrome 中，js 执行被错误“跨源资源共享策略拒绝跨源图像加载”拒绝。这意味着，您正在使用的服务器（即无）不会发送有效的跨域标头。另见this related question。如果您只是将其用于开发，您可以使用标志 --disable-web-security 启动 chrome，这应该允许您规避同源策略。否则，您将不得不在某处运行支持 CORS 的服务器。

【讨论】：