Comments (11)
Hey, no problem!
Are you seeing any errors in the browser's console?
from background-check.
yes, I will attach the errors I see in console and resource. Thanks! Did you check to see if your example works or not?
from background-check.
Hi, I have seen this problem just now. I understood what is wrong here. Below is the issue someone found before and you replied.
#10
and also if I know how to solve the "getImageData" error, I still have some problems about the BackgroundCheck.refresh() and BackgroundCheck.set(). Before the HTML pages are loading, we load all the resources first. So I loaded background-check.min.js. Then I created backgroundCheckMain.js and loaded it before HTML pages are rendered. backgroundCheckMain.js is wrote as below:
/* global BackgroundCheck:false */
document.addEventListener('DOMContentLoaded', function () {
BackgroundCheck.init({
targets: '.textOnImage'
images: '.background-image'
});
});
I know the key issue here is how to write backgroundCheckMain.js, so can you write and explain to me how to use BackgroundCheck.refresh() and BackgroundCheck.set()? and is it necessary to use refresh() and set()?
Thanks a lot!
from background-check.
Another question: is this script only used for "dynamic"? I mean you need to drag the "textOnImage" to different places, then the script will be triggered and check the current background, then add class "background--dark" or "background--light" to the element "textOnImage"? However, I want to put static "text" on one image and don't want to drag it. For example, the original css for this text is "color:black",when I put it on a dark image, will the class"background--dark" be added? everything is static and no drag, no moving. So I wonder if there is still trigger for the check-ground javascript? In this case, I don't want to drag the text, and just want to add "background--dark" or "background--light" to the original css if needed? My purpose is : just one original css for a static text, but I can put this text on different background images (the text is always clear to see)without considering the image color.
Thanks for taking a look at all my questions!
from background-check.
Hi!
BackgroundCheck.refresh()
is used when the position of the targets and/or images specified during BackgroundCheck.init()
change. If you set windowEvents
to true, refresh()
is automatically called after a scroll or a window resize.
BackgroundCheck.set()
is used to replace the targets and/or images with other elements, or modify other attributes that the plugin uses.
refresh()
and set()
are both optional. For example, if you're using BackgroundCheck with a slider, you initialize it using init()
and then call refresh()
after every slide transition. This is required because the position/order of the images changes. You probably never use set()
on a slider unless you replace the images with new ones.
Dynamic vs static - it can be used on both. You need to call refresh()
every time you replace the background image and the new light/dark class will be added to the text.
from background-check.
Thanks very much for your explanation.. I follow your steps and wrote a test case, I don't know what is wrong, but it doesn't work. The light/dark class is not added to the text. and I don't see any error in the console. Do you mind to take a look at my test? Below is the HTML Page:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Add meta and any other CSS and Javascript files -->
<style>
.background-image
{
position:absolute;
left:0;
top:0;
}
.breadcrumbs
{
position:absolute;
color:dimgray;
left:0;
top:0;
}
</style>
<!-- Load BackgroundCheck -->
<script src="../../scripts/lib/backgroundCheck/background-check.min.js"></script>
<!-- Styles for classes added by BackgroundCheck -->
<style>
.breadcrumbs.background--light {
color: #000;
}
.breadcrumbs.background--dark {
color: #fff;
}
</style>
</head>
<body>
<!-- Added a class to img -->
<img id="image" class="background-image" src="//imagepath.jpg"/>
<p id="text" class="breadcrumbs">Home</p>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Initialize BackgroundCheck
BackgroundCheck.init({
targets: '.breadcrumbs',
images: '.background-image'
});
});
</script>
</body>
</html>
and also your script is loaded correctly. Attaches are the screenshot for resource(your script is loaded for this page) and "class for text "(dark/light class is not added).
Thanks again for your explanation!
from background-check.
To give you more info, attach is the image and text I used.. Notice the text "Home" on the left top, it doesn't change color based on the background color.
from background-check.
We downloaded your example and put it on our web server, it works! But if we opened it in local machine directly, it will be broken as I said before.
Then we changed your background images used for index.html to some images from our image server, the image path is something like "http://......", and it is broken complaining the same as I put in the before comment: Uncaught Security Error, failed to execute"getImageData" on "CanvasRenderingContext2D", the canvas has been tainted by cross-origin data.
To fix this, we put the images from our image server into the image folder in your example and used the relative path in index.html. It works! Since we can not put all of our images in the project/image folder itself, I want to ask you if this script only works for "relative path image" and we need to put all the images locally in the project? which means that we can not use any other image resource such as an image server?
Thanks very much for answering these questions! It is really appreciated!
from background-check.
No problem!
That error occurs when you try to process an image that's not hosted on your domain, unless it's served with an appropriate Access-Control-Allow-Origin header.
from background-check.
You are awesome! Thanks a lot!
from background-check.
No problem! :)
from background-check.
Related Issues (20)
- Images not being targeted in FF53
- Unable to get image data from canvas because the canvas has been tainted by cross-origin data. HOT 2
- Target: Check not only image but any background?
- Using with FullPage.js HOT 1
- HTML-Element containing image with overflow:hidden; - invisibility of image is ignored
- is there a way to detect after? HOT 1
- Classes not added to element HOT 1
- cross origin not working.
- Finding image, but not sorting HOT 1
- Cross origin demo not working HOT 1
- Owl carousel not working with background-check
- Error: Area too small but image is there
- Uncaught [object HTMLDivElement] is not a target HOT 1
- Janky Colour Swapping HOT 2
- Edit color sensibility
- Doesn't seem to work HOT 2
- Not able to detect specific area of image
- The canvas has been tainted by cross-origin data. HOT 7
- Nested/Child elements with classname HOT 2
- For God's sake - update it!
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from background-check.