Question

我对此plug in有疑问，希望有人可以帮助我

我有一个背景图片，在加载特定页面后通过JavaScript设置。背景在任何时候都可以是由用户加载的亮或暗图像。插件在运行时已知（如在-css和-fullscreen演示中），但无法允许开发人员检查背景是否嵌入到正文中。

我尝试修改插件以满足我的需求，但到目前为止的每次尝试都会破坏插件。

在JS设置后，是否可以从动态分配的背景图像中检索图像数据？

将base64图像加载到<canvas />对我来说不起作用，因为图像应当，但在将其作为子项附加到当前文档实例后不会被渲染（img.onload永远不会被触发）。

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

背景检查JS

1 个答案: