javascript - 使用 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
      }
    }
  });
});

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
      }
    }
  });