多张如何生成canvas并显示在fancybox？

Question

代码如下：

<div class="content_item">
    <div class="img_item">
        <a data-fancybox="gallery1" href="图片地址[1]01"><img src="图片地址" /></a>
        <a data-fancybox="gallery1" href="图片地址[1]02"><img src="图片地址" /></a>
        <a data-fancybox="gallery1" href="图片地址[1]03"><img src="图片地址" /></a>
    </div>
</div>
<div class="content_item">
    <div class="img_item">
        <a data-fancybox="gallery" href="图片地址2[2]01"><img src="图片地址2" /></a>
        <a data-fancybox="gallery" href="图片地址2[1]02"><img src="图片地址2" /></a>
    </div>
</div>
<div class="qrcode"><img src="二维码图片需要与上面所有图片合成canvas"</div>

解释：a标签里的data-fancybox是使用fancybox需要使用的，而href里是原图地址（也是点击后会放大显示并切换的图）img标签里的是缩略图。

fancybox是图片灯箱插件，意为点击图片即可放大，并左右切换，我想实现的效果是，在页面刷新或进入后未点击前，就把所有图片与二维码合成一张base64位图片地址，再把a标签里的对应href换成canvas全成后对应的base64位图片地址。请问我该怎么做呢？

实在是写不好啦。我来求救，还望各位能够给予帮助。非常感谢！~

Answer 1

没写过，给你一个思路：

• 轮播图片、二维码图片用img先加载起来
• 然后用cavans依次合并，生成base64地址(toDataUrl)，并把地址设置到fancybox配置上

参考：水印合成