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

深碍√TFBOYSˉ_ 2022-02-12 10:41 160阅读 0赞

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

说明：图片是图片列表，所以可能是单张图片，也可能是多张,并且每张图片上会有其他的元素，展示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结构

*  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') )
    },

![在这里插入图片描述][20190428173203444.png]

#### 总结 ####

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

[20190428173203444.png]: /images/20220212/e51e51d78ae347b0981913daa4ccc51a.png