canvas画布截图并制作为预览图

秋去冬来，人都变懒了，督促自己写个文章。

---

前言

好久没有写文章了，最近比较闲，琢磨分享一些最近开发遇到的新需求。

• 最近有个需求比较有意思，需要把画布制作成预览图，放在下面以便选择。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、实现效果

话不多说，老规矩，先上效果图，有需要再往下看。

• 这个需求的目的是根据后台返回的数据，自动绘制多个画布，放在下方形成预览图，选中哪一个，上方的主画布就显示哪一个。
• 这里我不介绍画布上的东西是怎么绘制的，主要介绍的是对画布的截图，以及预览图选项的制作。

二、实现步骤

1.html部分

代码如下：

<div class="canvas-wrapper" id="konva1"></div>
<div class="canvas-wrapper" :id="canvasId(index + 2)" v-for="(item, index) in templateList" :key="index"></div>

这里放置了两个div标签，上面的div展示上方主画布；下面的div是个循环结构，用来绘制画布并截图，用作下方预览图的展示。

2.绘制画布并截图

代码如下：

// 遍历获取的数据，绘制画布。因为节点是循环结构，有多少条数据，就创建多少个画布。
this.templateList.forEach((item, index) => {
	// 在指定ID的节点上绘制画布，参数为节点的ID和绘制数据，这里不详细展示
	qCreate("konva" + (index + 2), item);
})
// 待canvas绘制完成后，获取canvas节点，生成图片
this.getCanvasImage ()

// 获取画布截图
getCanvasImage () {
  // 重置预览图列表
  this.tempLayoutList = []
  // canvas长度减去上面的主画布，剩下的画布用作推荐布局
  let nodeLength = document.getElementsByClassName("konvajs-content").length
  // 这个长度用来判断生成了多少个画布，把第一个主画布跳过，从1开始。
  if (nodeLength > 1) {
    for(let i=2; i<nodeLength; i++) {
      // 获取画布外层的div节点
      let outer = document.getElementsByClassName("konvajs-content")[i];
      // 获取canvas节点
      let canvasNode = outer.childNodes[0];
      // 把画布节点转换为url地址
      let dataURL = canvasNode.toDataURL();
      // 把每个URL地址当作预览图对象存储
      let tempFirst = {
        name: `推荐模版(${i-1})`,
        id: i-1,
        image: dataURL,
      }
      // 把预览图存入自定义的数组中
      this.tempLayoutList.push(tempFirst)
    }
  }
}

这一步的操作主要是获取画布节点，并转换为url地址。
数据已经有了，只需要制作预览图展示的部分就好了。这里简单用个数组标签

<ul>
  <li 
  	v-for="(item, index) in tempLayoutList"
    :key="item.id"
    :id="item.id"
    @click="handleSelectTemp(item, index)"
    :class="{ selected: item.id == tempActived }"
    class="overallRecommendItem"
  >
    <van-image :src="item.image"></van-image>
  </li>
</ul>

上面的click设置选中状态，选中效果自由发挥就好了，在 .selected {} 写上自己喜欢的选中效果，到此完成需求。

---

总结

以上就是今天要讲的内容，本文简单介绍了画布如何转换为预览图，欢迎各位帅哥美女交流。