秋去冬来,人都变懒了,督促自己写个文章。
前言
好久没有写文章了,最近比较闲,琢磨分享一些最近开发遇到的新需求。
- 最近有个需求比较有意思,需要把画布制作成预览图,放在下面以便选择。
提示:以下是本篇文章正文内容,下面案例可供参考
一、实现效果
话不多说,老规矩,先上效果图,有需要再往下看。
- 这个需求的目的是根据后台返回的数据,自动绘制多个画布,放在下方形成预览图,选中哪一个,上方的主画布就显示哪一个。
- 这里我不介绍画布上的东西是怎么绘制的,主要介绍的是对画布的截图,以及预览图选项的制作。
二、实现步骤
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 {} 写上自己喜欢的选中效果,到此完成需求。
总结
以上就是今天要讲的内容,本文简单介绍了画布如何转换为预览图,欢迎各位帅哥美女交流。