Как я могу получить URL изображения с веб-страницы, на которую я нажимаю? - PullRequest
Новая
       10

Как я могу получить URL изображения с веб-страницы, на которую я нажимаю?

0 голосов
/ 15 февраля 2020

Я создаю бесплатные инструменты для моих коллег-кладовщиков, чтобы помочь им продвигать свои дизайны. Один из таких инструментов создает видео из изображений своих продуктов. Чтобы сделать это максимально полезным, я хочу, чтобы они легко брали URL-адреса изображений из своего магазина, чтобы их можно было использовать для создания видео. Их магазины могут быть в Redbubble, FineArt America или где угодно.

Для этого мне удалось собрать воедино некоторый код, который я превращаю в книжный рынок. Мое намерение состоит в том, чтобы они нажимали букмарклет, когда они находятся в их магазине, а затем нажимали на элемент div, содержащий изображения продуктов, которые они хотели бы «захватить». Чтобы помочь им, мой код помещает пунктирные линии вокруг элементов div, над которыми они парят.

Код не идеален ни в коем случае. Если щелчок находится не в том месте и он не получает изображения, которые ему нужны, нужно щелкнуть букмарклет, чтобы повторить попытку. Иногда им приходится обновлять sh страницу, прежде чем букмарклет снова заработает.

Кроме того, я не знаю, как правильно восстановить элементы div при наведении указателя мыши на них.

Так что я ' я ищу несколько указателей на то, где я иду не так и как я могу исправить вещи, чтобы получить желаемое поведение.

Пожалуйста, будьте осторожны;)

Код, который я использую для букмеклет находится ниже, и здесь я использую его для преобразования в букмарклет (мне нужно установить флажок, чтобы включить jquery): производитель букмарклетов

код 

var linkit =  document.getElementsByTagName("div");
var myElement;
myMHRImageSrcStr = "";
myMHRFirstTime = true;
function doImages() {
    myMHRImageSrcStr = "";
    console.log('element clicked: ' + myElement);
    console.log('event type: ' + event.type);
    var x = myElement.getElementsByTagName('img').length;
    console.log('images count: ' + x);
    for(j=0;j < x;j++)  {
        var myImgSrc = myElement.getElementsByTagName('img')[j].getAttribute('src');
        var myImgWidth = myElement.getElementsByTagName('img')[j].naturalWidth;
        var myImgHeight = myElement.getElementsByTagName('img')[j].naturalHeight;
        console.log(myImgSrc);
        console.log(myImgWidth);
        console.log(myImgHeight);
        if (myImgWidth > 195 && myImgHeight > 195) {
            myMHRImageSrcStr += myImgSrc + '<br>';
        }
    }
    if (myMHRFirstTime) {
        myMHRFirstTime = false;
        var myWindow = window.open("", "MsgWindow", "width=900, height=600");
        myWindow.document.write("<h1 style='user-select:none;'>Captured image urls</h1><p style='user-select:none;'>Copy the following ready for pasting into the Nifty POD Product Stager:</p><p style='font-size:13px;'>" + myMHRImageSrcStr + "</p>");
    }
}

function isInside(node, target) {
    for (; node != null; node = node.parentNode) {
        if (node == target){
            return true;
        }
    }
}

Array.prototype.forEach.call(linkit,function(element) {
    element.addEventListener("mouseover", function(event) {
        if (!isInside(event.relatedTarget, element) ) {
            if($(element).find('img').is(':visible') ){
                element.style.border = "2px dashed #888";
                element.style.margin = "5px 5px 5px 5px";
                element.style.cursor = "copy";

                myElement = element;
                element.addEventListener("click", doImages );
            }
        }
    });
    element.removeEventListener("click", doImages );
    element.addEventListener("mouseout", function(event) {
        if (!isInside(event.relatedTarget,element))
         element.style.border = "";
        element.style.cursor = "default";

    })
})
...