【vue】【wPaint】DOM转图片，使用wPaint进行记号笔操作

需求：对图片进行记号笔操作

说明：图片是图片列表，所以可能是单张图片，也可能是多张,并且每张图片上会有其他的元素，展示dom结构如下

<div id="j-html-img">
	<div v-for="(item, index) in imageList" :key="'item.id" class="canvas-wrp">
	    <img :src="item.imgUrl" class="imgDom">
	    <div>item.content</div>
	</div>
</div>

• 使用框架：vue
• 使用插件：jquery(注意版本：1.8.3)，wPaint.js，html2canvas

思路：

• 使用html2canvas将展示图片的多张附带其他信息dom转图片
• 将转出的图片传入wPaint进行初始化

使用html2canvas将展示图片的多张附带其他信息dom转图片

htmlToImg() {
  // 获取页面图片列表展示的dom
  let imgDom = $("#j-html-img")[0]; 
  // 图片合并之后返回canvas
  html2canvas(imgDom).then(function(canvas) {
    // 将canvas转成base64图片
    _this.imgPath= canvas.toDataURL