DOM转图片,使用wPaint进行记号笔操作

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

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

item.content
  • 使用框架: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结构
  • 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遇到的问题,多看看官方文档还是很有必要的。

你可能感兴趣的:(DOM转图片,使用wPaint进行记号笔操作)