Question

我想在pinterest上分享一个数据uri图像。

我提出了以下标记：

<tag> 
    <tag1>example</tag1>
</tag>

在我身体的最后，我包括这个JS：

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

通常，pinit.js应该在链接中选取img标签的src，但是当我打开链接时，我看不到要分享的图像。

我还尝试通过向网址添加GET参数来共享没有pinit.js，但我的数据uri太长了。

我的研究没有给出关于在pinterest上分享生成的图像的有用建议，所以希望你们有一个答案对我来说： - ）

Answer 1

您可以使用正确的网址轻松更新锚标记，并避免加载 pinit.js 脚本。

基本的GET方法可以解决这个问题......

我很快写了一个能为你做到这一点的功能。你只需要将img选择器传递给它，它将找到所有出现并应用逻辑。

<强>样本： 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');

确保您在适合的地方调用此功能。

如何在Pinterest上共享数据图像？

1 个答案: