Как передать изображение данных-uri на Pinterest?

Question

Я хочу поделиться данным-uri на pinterest.

я придумал следующую разметку:

<a target="_blank" href="https://www.pinterest.com/pin/create/button/"> 
    <img class="pin-image" src="data:image/png;base64,…"> 
</a> 

В конце моего тела я в том числе это JS:

<script 
    type="text/javascript" 
    async defer 
    src="//assets.pinterest.com/js/pinit.js" 
></script> 

Обычно pinit.js должен забрать src тега img внутри ссылки, но когда я открою ссылку, я не вижу изображение, которое хочу поделиться.

Я также пытался поделиться без pinit.js, добавив параметры GET в URL-адрес, но мои данные-uri слишком длинны.

Мои исследования не дали мне полезные советы по обмену генерироваться изображения на Pinterest, так что надеюсь на вас, ребята есть ответ для меня :-)

Answer 1

Вы можете легко обновить якорный тег с соответствующим URL и избежать загрузки что pinit.js сценарий ..

основной метод GET делает трюк ...

Я быстро написал функцию, которая будет делать это для вас. Вам просто нужно передать ему селектор img, и он найдет все вхождения и применит логику.

DEMO: https://jsfiddle.net/zmgyc0bd/

function pinterestShareFormatter(imgSelector) { 
    var imgs = document.querySelectorAll(imgSelector), 
     baseUrl = '//www.pinterest.com/pin/create/button/?'; 

    [].forEach.call(imgs, function(img) { 
    var imgSrc = img.getAttribute('src'), 
     articleUrl = img.getAttribute('article-url') ? img.getAttribute('article-url') : window.location.href, // check if there is article url attribute and if not assign the current page url. 
     parentAnchorEl = img.parentNode; 

    // check if parent element is <a> 
    if(parentAnchorEl.tagName === 'A') { 
     // format the url params 
     var params = { 
     url: articleUrl, 
     media: imgSrc 
     }, 
     paramsString = Object.keys(params).map(function(key){return key + '=' + encodeURIComponent(params[key]);}).join('&'); 

     // update the anchor with formatted url 
     parentAnchorEl.setAttribute('href', baseUrl + paramsString); 
    } 
    }); 
} 

pinterestShareFormatter('.pin-image'); 

• убедитесь, что вы вызываете эту функцию в нужном для вас месте.