2014-01-08 37 views
0

我有關於這個plug in一個問題,希望有人能幫助我背景檢查JS

我有一個是通過JavaScript設置特定頁面加載後的背景圖像。背景可以在任何時候是由用戶加載的亮或暗圖像。當運行時已知圖像時(例如在-css和-fullscreen演示中),插件可以很好地工作,但無法讓開發人員檢查背景是否嵌入到主體中。

我試着修改插件來適合我的需求,但是到目前爲止每一個嘗試都打破了插件。

是否有可能從動態指定的背景圖像檢索圖像數據後,它已由JS設置?

將base64圖像加載到<canvas />對我來說不適用於圖像,但是在將圖像作爲子項追加到當前文檔實例之後,該圖像應該但不會呈現(img.onload永不會被觸發)。

回答

-1
<html> 
    <head> 
     <title></title> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script><script type="text/javascript" src="background-check.min.js"></script> 
     <link rel="stylesheet" href="examples.css"/> 
     <style type="text/css">.fixed {left: 0;position: absolute;top: 0;width: 50%;}.fixed-nav {position: absolute;left: 50%;top: 47px;width: 280px;margin-left: -140px;text-align: center;}.fixed-nav.background--dark .fixed-nav-line {background: #fff;}.fixed-nav.background--dark .fixed-nav-logo {color: #fff;}.fixed-nav.background--dark .fixed-nav-no {color: #fff;}.fixed-nav.background--dark .fixed-nav-name {color: #fff;}.fixed-nav-line,.fixed-nav-logo {display: inline-block;vertical-align: middle;margin: 0;padding: 0;}.fixed-nav-line {width: 40px;height: 3px;background: #222;}.fixed-nav-logo {height: 28px;font-size: 25px;font-weight: bold;text-align: center;}</style> 
     <script type="text/javascript"> /* global BackgroundCheck:false */window.addEventListener('DOMContentLoaded', function() {BackgroundCheck.init({targets: '.fixed-nav'});});function readURL(input) {if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#previewHolder').attr('src', e.target.result); //alert(e.target.result); } reader.readAsDataURL(input.files[0]);}}window.onload = function(){$('#previewHolder').attr('src','Winter.jpg');$("#filePhoto").change(function() { readURL(this);});}</script> 
    </head> 
    <body> 
     <div class="fixed"> 
     <div class="fixed-nav"> 
      <div class="fixed-nav-logo">22&nbsp;&nbsp;&nbsp;22&nbsp;&nbsp;&nbsp;22&nbsp;&nbsp;&nbsp;222</div> 
      <div class="fixed-nav-name">ssssss</div> 
      <div class="fixed-nav-no">ssssssss</div> 
     </div> 
     </div> 
     <input type="file" name="filePhoto" value="" id="filePhoto" class="required borrowerImageFile" data-errormsg="PhotoUploadErrorMsg"><img id="previewHolder" alt="Uploaded Image Preview Holder" width="400px" height="200px"/> 
    </body> 
</html>