使用Fancybox创建一个Blob图片画廊

Question

在fancybox的示例中，您可以这样创建一个fancybox画廊：

$("#fancybox-manual-c").click(function() {
  $.fancybox([{
    href: '1_b.jpg',
    title: 'My title'
  }, {
    href: '2_b.jpg',
    title: '2nd title'
  }]);
});

在 HTML 中，您应该像这样创建链接：

<a id="fancybox-manual-c" href="javascript:;">Open gallery</a>

但问题是，我的图片是BLOB格式的，并且我不知道如何获取图片的路径。也许有人知道我该怎么做？

我需要通过单击链接打开我的相册。

我可以使用ajax获取图片数据，然后尝试处理它，但那并没有起作用。

$.get("imgView.php", {
  image_id: 5
}, function(data) {
  $.fancybox({ type: 'image' }, 
    [{
      href: data,
      title: 'My title'
    }, {
      href: '2_b.jpg',
      title: '2nd title'
    },{
      href: '3_b.jpg'
    }], {
    helpers: {
      thumbs: {
        width: 75,
        height: 50
      }
    }
  });
});

- atomeks

Answer 1

你尝试过使用base64源码吗？结果会像这样。

<img alt="Embedded Image" src="data:image/png;base64,iVBORwAAANSU...hJUSKmfmdfm" />

根据文件类型，可以使用data:image/jpeg;base64或data:image/png;base64。

$.fancybox({ type: 'image' }, 
    [{
      href: "data:image/png;base64," + data,
      title: 'My title'
    }, {
      href: '2_b.jpg',
      title: '2nd title'
    },{
      href: '3_b.jpg'
    }], {
    helpers: {
      thumbs: {
        width: 75,
        height: 50
      }
    }
  });

- rrk

---

谢谢你的回答！我刚试着将"data:image/png;base64,"添加到href中，但没有起作用。 - atomeks