試圖實施rainyday.js與本地圖像，而不是一個Web圖像

嗨，我想實施rainyday.js成一個項目，我正在工作，但是我沒有Javascript的經驗，所以我很掙扎。試圖實施rainyday.js與本地圖像，而不是一個Web圖像

基本上，代碼目前調用在線圖像（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>

鏈接到JS在Github上：

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

感謝您的幫助！

來源

2014-03-05 Jody

您的圖片網址的外觀如何？ – Justinas

好問題：我的圖片存儲在一個文件夾中，因此圖片url爲'images/thisisanimage.jpg' – Jody

你在Firefox試過嗎？它適用於我，但在Chrome中，js執行被錯誤「跨源資源共享策略拒絕的跨源圖像加載」拒絕。這意味着，您使用的服務器（即沒有）不會發送有效的跨源頭。另見this related question。如果您只是將其用於開發，您可以使用標記--disable-web-security開始Chrome，這應該允許您規避相同的源策略。否則，你將不得不在某處運行支持CORS的服務器。

來源

2014-03-05 13:24:09

試圖實施rainyday.js與本地圖像，而不是一個Web圖像

回答

相關問題