【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("image/jpg");
    // 设置canvas的父级高度，根据原有图片转换计算
    $('#wPaint').height(canvas.style.height)
    // 将转换的图片传入wPaint
    _this.initImage( _this.imgPath);
  });
},

注意：当转换成canvas之后，使用style.height获取图片高度，与原有图片保持一致，使用canvas.height会高度会使图片放大

将转出的图片传入wPaint进行初始化

• wPaint.js的dom结构

<div id="wPaint" ></div>

• wPaint.js的初始化，初始化完成即可进行绘制操作

initImage(){
	$("#wPaint").wPaint({
	    image: path,
	    width: $("#wPaint").width(),
	    height: $("#wPaint").height(),
	})
}

进行记号笔操作

项目使用记号笔操作是自定义的点击事件，点击按钮时，调用wPaint执行点击事件

pencilClick(){
  // 记号笔
   $("#wPaint")
   .find(".wPaint-menu-name-main")
   .find("[title=Pencil]")
   .trigger("click");
}

踩过的坑：引入wPaint相关文件之后，报错Uncaught TypeError: url.indexOf is not a function

原因： .load() , .error() , .unload() ,已经不在支持，jquery1.8版本之后的都无法再使用，wPaint使用的是1.8.3，而我们项目使用的是3.3.1
修改：如果你使用的jquery是高版本的并且在其他地方没有使用的话，可以直接降低jquery的版本，如果项目中你的其他地方也使用了高版本的jquery的方法，那么你可以将wPaint.js中的$(myImage).load( loadImage)改成$(myImage).on('load', loadImage);

遇到的其他问题：离开页面时获取当前页面的DOM元素失败

beforeDestroy(){
  // 当我直接获取元素的时候，获取不到元素
  console.log( $('#wPaint') )
  // 通过获取到当前的this.$el
  console.log( $(this.$el).find('#wPaint') )
},

总结

针对本次使用wPaint，以及vue的beforeDestroy遇到的问题，多看看官方文档还是很有必要的。