背景调查JS
背景调查JS
提问于 2014-01-08 19:19:16
我有一个关于这个plug in的问题，希望有人能帮我解决
我有一个背景图像，它是在特定页面加载后通过JavaScript设置的。背景在任何时候都可以是由用户加载的亮或暗图像。当图像在运行时是已知的(如在-css和-fullscreen演示中)时，该插件工作得很好，但不允许开发人员检查背景是否嵌入到正文中。
我试着修改插件以满足我的需求，但到目前为止每次尝试都会破坏插件。
在JS设置后，是否可以从动态分配的背景图像中检索图像数据？
将base64图像加载到<canvas />中对我来说也不起作用，因为图像应该是有效的，但是在将其作为子级附加到当前文档实例之后，它不会被呈现(img.onload永远不会被触发)。
回答 1
Stack Overflow用户
发布于 2014-02-16 23:25:00
<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 22 22 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20994136
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号