Closed WindyWong closed 10 years ago
Hey, no problem!
Are you seeing any errors in the browser's console?
yes, I will attach the errors I see in console and resource. Thanks! Did you check to see if your example works or not?
Hi, I have seen this problem just now. I understood what is wrong here. Below is the issue someone found before and you replied. https://github.com/kennethcachia/Background-Check/issues/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!
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!
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.
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!
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.
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!
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.
You are awesome! Thanks a lot!
No problem! :)
Hi Kennethcachia,
Thanks for sharing such an amazing script.
I want to use this script in our project, but it doesn't work. Even when I downloaded your example, it doesn't work either. The only working one seems like your demo. Could you please check the uploaded script and your example? and I follow this tutorial you wrote down exactly, it doesn't work. See the link below(tutorial for designers):
https://github.com/kennethcachia/Background-Check/issues/24
Thanks in advance for answering my question!