JavaScript Load Image from URL in a Crossrider browser extension

Question

I'm currently writing an extension using Crossrider, and I need to load an image directly using the URL for doing some image processing on it. However, the onload event doesn't seem to be firing at all.

Am I doing something wrong or is it even possible to do that in a browser extension?

Here is the relevant piece of code:

var imga = document.createElement('img');
imga.src = obj.attr('href'); // URL of the image
imga.style.display = 'none';
imga.onload = function() {
        alert('Image loaded');
        var imgData = getImageData(imga, 0, imga.height - 3);
        alert('Got Image data');
};

EDIT

Here is the full code

function readImage(obj)
        {
            console.log('Reading');
            relayReadImage(obj.attr('href'));
        }

        function relayReadImage(link)
        {
            var dateObj = new Date();
            var newlink = link + "?t=" + dateObj.getTime();
            console.log(newlink);
            appAPI.request.get(
                {
                url: newlink,

                onSuccess: function(response, additionalInfo) {
                    console.log(response);
                },

                    onFailure: function(httpCode) {
                    alert('GET:: Request failed. HTTP Code: ' + httpCode);
                }

                });
        }

Try setting the `.src` property **after** the `.onload`. It may be cached. Another option is to add a query string to the `src` so that it breaks any cache. I'd prefer using my first suggestion — Ian, May 06 '13 at 17:01

score 2 · Answer 1 · answered May 06 '13 at 19:55

2

I'm a Crossrider employee and would be happy to help you. If I understand correctly, you are attempting to use the URL (href) of an object in a page's dom (obj.attr('href')) to load the image into a variable in the extension. You can achieve this using our cross-browser appAPI.request.get method in your extension.js file, as follows:

appAPI.ready(function($) {
    appAPI.request.get({
        url: obj.attr('href'),
        onSuccess: function(response) {
            var imgData = response;
            console.log(imgData);
        }
    });
});

However, if I've misunderstood your question, please can you clarify the following:

What is the obj object is?
What are you trying to achieve, and in which context (in the Extension or on the Page)?

answered May 06 '13 at 19:55

Shlomo

3,763
11
16

Thanks for your reply. To answer your questions first, obj is an image object that the user drags, and we'd like to do some image processing on it, the extension will do our bidding. Anyway, after some tests, we found out that the image loading actually worked, but the browser would fetch it from the cache. Is there anyway around this? – Khaled Nassar May 06 '13 at 22:25
You can simply add a random parameter to the URL. For more information, see http://stackoverflow.com/questions/8749434/how-to-prevent-browser-image-caching. – Shlomo May 07 '13 at 06:51
Seems to be the solution, but there is another problem, we can't concatenate any strings to obj.attr('href'). The browser seems to be ignoring any operations done on it, I can't log it or print it using an `alert()`. Is there anyway around this? – Khaled Nassar May 07 '13 at 15:32
Can you provide the code? Have you tried assigning to a variable and then concatenating the variable? Also, have you tried the code I provided ;-) – Shlomo May 08 '13 at 07:28
Edited the question and added code. Yes, I have tried concatenating the variable into another one, and your code as well. It's just a very unusual problem... – Khaled Nassar May 10 '13 at 09:19
Can I clarify why you are trying to get the **href** attribute of an **img** tag? By definition the attribute does not exist on the **img** tag and hence your code is not working. Try using **obj.attr('src')**. – Shlomo May 12 '13 at 07:34
I should've explained more, the browser doesn't actually drag the image object but a HTML link object that wraps it for some reason, and the **href** attribute is the same as the **src** attribute of the wanted image. – Khaled Nassar May 12 '13 at 08:20
I'm a Crossrider employee and would be happy to help you debug the extension. However, I don't think StackOverflow is the appropriate forum and I therefore invite you to email our support channel (support@crossrider.com) with a link to this thread and the extension id, and I will be happy to assist you further. – Shlomo May 12 '13 at 10:36

JavaScript Load Image from URL in a Crossrider browser extension

1 Answers1