Coder Social home page Coder Social logo

Comments (11)

kennethcachia avatar kennethcachia commented on May 29, 2024

Hey, no problem!

Are you seeing any errors in the browser's console?

from background-check.

WindyWong avatar WindyWong commented on May 29, 2024

yes, I will attach the errors I see in console and resource. Thanks! Did you check to see if your example works or not?
resource-error

console error

from background-check.

WindyWong avatar WindyWong commented on May 29, 2024

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.

WindyWong avatar WindyWong commented on May 29, 2024

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.

kennethcachia avatar kennethcachia commented on May 29, 2024

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.

WindyWong avatar WindyWong commented on May 29, 2024

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).

checkbackgroundscript
textclass

Thanks again for your explanation!

from background-check.

WindyWong avatar WindyWong commented on May 29, 2024

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.
image and text

from background-check.

WindyWong avatar WindyWong commented on May 29, 2024

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.

kennethcachia avatar kennethcachia commented on May 29, 2024

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.

WindyWong avatar WindyWong commented on May 29, 2024

You are awesome! Thanks a lot!

from background-check.

kennethcachia avatar kennethcachia commented on May 29, 2024

No problem! :)

from background-check.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.