0

Recently I want to start a project by piggyback someone's extension. I want to scope one of the image source (local variable, a base64 url) and then photo recognize it on the popup page. I keep getting error "imgb64.replace is not a function" or "imgb64" not defined.

like my title said, I want to scope the local variable in.in.inside a function (from backgound.js )and use it globally (or in popup.js). very new to this, please help guys.

// this is popup.js
chrome.runtime.getBackgroundPage(function(bg) {
bg.capture(window);
});

/// what I did

function img_find() {
var imgs = document.getElementsByTagName("img");
var imgSrcs = [];

for (var i = 0; i < imgs.length; i++) {
    imgSrcs.push(imgs[i].src);
}
return imgSrcs;
}

var imgb64 = img_find();

try {
const app = new Clarifai.App({
apiKey: 'mykey'
});
    }

    catch(err) {
alert("Need a valid API Key!");
throw "Invalid API Key";
}

// Checks for valid image type
function validFile(imageName) {
var lowerImageName = imageName.toLowerCase();
return lowerImageName.search(/jpg|png|bmp|tiff/gi) != -1;
}


var imageDetails = imgb64.replace(/^data:image\/(.*);base64,/, '');


console.log(imageDetails)

app.models.predict("e466caa0619f444ab97497640cefc4dc", {base64: 
imageDetails}).then(

  function(response) {

    // do something with response
  },
  function(err) {
    // there was an error
  }
  );

 /// end what I did

below is background.js, I think what I need is the local var img.src, thats all.

function capture(popup) {

function callOnLoad(func) {
    popup.addEventListener("load", func);
    if (popup.document.readyState === "complete") {
        func();
    }
}


crxCS.insert(null, { file: "capture.js" }, function() {


    crxCS.callA(null, "get", function(result) {

        var scrShot, zm, bufCav, bufCavCtx;



        function mkImgList() {
            for (var i = 0; i < result.vidShots.length; i++) {
                var img = new popup.Image();
                img.onload = function() {
                    this.style.height = this.naturalHeight / 
(this.naturalWidth / 400) + "px";
                };

                if (result.vidShots[i].constructor === String) {
                    img.src = result.vidShots[i];
                } else {
                    bufCav.width = result.vidShots[i].width * zm;
                    bufCav.height = result.vidShots[i].height * zm;
                    bufCavCtx.drawImage(scrShot, -result.vidShots[i].left * 
zm, -result.vidShots[i].top * zm);
                    img.src = bufCav.toDataURL('image/png');

////// maybe clarifai here ?


////end clarifai
                }

                popup.document.body.appendChild(img);
            }
            popup.onclick = function(mouseEvent) {
                if (mouseEvent.target.tagName === "IMG") {
                    chrome.downloads.download({ url: mouseEvent.target.src, 
saveAs: true, filename: "chrome_video_capture_" + (new Date()).getTime() + 
".png" });
                }
            };
            popup.onunload = function(mouseEvent) {
                crxCS.callA(null, "rcy");
            };
        }   /// end mkImgList

        if (result.needScrShot) {
            bufCav = popup.document.createElement("canvas");
            bufCavCtx = bufCav.getContext("2d");

            chrome.tabs.captureVisibleTab({ format: "png" }, 
function(dataUrl) {
                scrShot = new Image();
                scrShot.onload = function() {
                    chrome.tabs.getZoom(function(zoomFactor) {
                        zm = zoomFactor;
                        callOnLoad(function() {
                            mkImgList(zoomFactor);
                        });
                    });
                };
                scrShot.src = dataUrl;


            });
        } else if (result.vidShots.length) {
            callOnLoad(mkImgList);
        } else {
            popup.document.body.appendChild(notFound);
        }

    });  // end crxCS.callA
});   // end crxCS.insert
}  // end capture

Please help guys. :)

Kai Peng
  • 57
  • 2
  • 6
  • 1) imgb64 is an array you generate in img_find so it doesn't have a `replace` method. 2) It's not clear why you want to put the code in the background script. Wouldn't it be much simpler to put the code in popup.js? – wOxxOm Sep 15 '18 at 04:19
  • wOxxOm: thanks for the quick response, ya after some thought I think it would be simpler to do it in popup.js, what would be the best approach for this ? for getting the img source (where it only have one img tag in popup)? not sure how to get that src... Also if you could...I was wonder if I should move the app to webpack and start there...? The clarifai documentation says it works in nodejs or browser through browserify...and I saw their web app was packed using webpack...would love to hear your suggestion. – Kai Peng Sep 17 '18 at 00:12

0 Answers0