Question

您好我正在尝试将rainyday.js应用到我正在开发的项目中，但是我没有使用Javascript的经验，所以我很难挣扎。

基本上代码当前称为在线图像（来自imgur），这很好用。但是当我尝试调用本地图像时，它不会显示效果，只显示本地图像。

是否有任何简单的方法可以使此代码调用本地图像而不是Web图像？

以下是代码：

<!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

感谢您的帮助！

Answer 1

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

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

1 个答案: