Pinterestでdata-uri画像を共有するには？

Question

私はpinterest上でデータURI画像を共有したいと思います。

私は次のマークアップを作ってみた：

<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は拾う必要がありますリンク内のimgタグのsrcですが、リンクを開くと共有したい画像は表示されません。

また、私はpinit.jsを使わずにURLにGETパラメータを追加して共有しようとしましたが、私のdata-uriが長すぎます。私の研究は、共有に私に役立つアドバイスを与えていない

は君たちの上でうまくいけば、Pinterestの上の画像を生成

Answer 1

:-)私のための答えを持っているあなたは簡単に適切なURLでアンカータグを更新することができますし、

...基本的なGETメソッドは、トリックを行います

...そのpinit.jsスクリプトのロードを避けるため、私はすぐにあなたのためにそれを行うだろう機能を書きました。 これに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'); 

• はあなたのために適切な場所に、この関数を呼び出していることを確認してください。