【vue】【wPaint】html2canvas模糊，wPaint转写模糊，坐标偏移，滚动失效，图片加载失败，添加马赛克

浅浅的花香味﹌ 2022-04-25 07:08 375阅读 0赞

上一篇我们讲到html2canvas，dom转图片，并对图片进行记号笔操作  
这一篇我们说一下转写相关的问题：

*  转写模糊
 *  图片加载失败
 *  记号笔坐标偏移
 *  滚动失效
 *  改个马赛克

#### 存在两次转写，模糊的原因可能就有两个 ####

*  html2canvas转模糊
 *  wPaint转模糊

#### html2canvas转模糊 ####

解决办法：

*  获取设备像素比并设置canvas的宽高以及canvas.style的宽高

#### 出现的问题 ####

图片在移动端无法显示，在PC端正常显示

#### 引起的原因 ####

因为移动端图片跨域导致的

#### 解决办法 ####

官方文档给出了解决方案：[http://html2canvas.hertzen.com/configuration][http_html2canvas.hertzen.com_configuration]  
![在这里插入图片描述][20190530104009108.png]

useCORS:true,

#### wPaint转模糊 ####

解决办法：

*  存储html2canvas转写的图片宽高
 *  wPaint初始化时赋值上存储的宽高

html2canvas(imgDom[0],{
              useCORS:true, // 允许图片跨域
              canvas:canvas,
            }).then(function(canvas) {
         // 赋值图片宽高
    	this.img = canvas.toDataURL()
    	this.width = canvas.width
    	this.height = canvas.height
    }）
    // 初始化图片宽高与原图保持一致
    let _this = this
    $("#wPaint").wPaint({
    	image: this.img,
    	width: this.width,
    	height: this.height,
    })

#### 出现的问题（重要） ####

这里图片不会模糊，但是记号笔绘制的坐标会出现偏移

#### 引起的原因 ####

原先我们设置的\#wPaint的宽高与她绘制的canvas的宽高是一致的，但是现在我们将canvas的宽高设置成了原图的宽高，导致wPaint的宽高（屏幕）比canvas的宽高不一致，所以当绘制的时候记录的坐标点与canvas的坐标点不同  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vb29ueXVhbg_size_16_color_FFFFFF_t_70]

#### 解决办法： ####

*  在wPaint.js中\_callShapeFunc方法中设置坐标的缩放比例
 *  这里使用的是宽度的缩放比例对应点击的坐标点，是因为实际情况，我们的图并不是正好与wPaint宽高等比，如下图所示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vb29ueXVhbg_size_16_color_FFFFFF_t_70 1]

#### 修改代码 ####

let scalee = _this.width / $('#wPaint').width() 
    // update offsets here since we are detecting mouseup on $(document) not on the canvas
    e.pageX = scalee * Math.floor(e.pageX - canvasOffset.left);
    e.pageY = scalee * Math.floor(e.pageY - canvasOffset.top);

#### 遇到的其他问题 ####

我们需求是在不使用记号笔的时候，图片可以正常滚动，但是wPaint转写之后，图片不能正常滚动了

#### 引起的原因 ####

wPaint.js中在创建了canvas之后绑定了bindMobileEvents事件，这个事件在wPaint.utils.js中 event.preventDefault();因此导致不能滚动

case 'touchmove':
    type = 'mousemove';
    // event.preventDefault();
    break;

#### 解决办法： ####

*  注释掉event.preventDefault()就可以了，如果需要不滚动可以在你自己的页面重新配置

#### 添加马赛克 ####

*  我把wPaint的line改了
 *  绘制两个方形组合

// 划线修改成马赛克 start
    _drawLineDown: function(a) {
        this.ctx.fillStyle = randomGrey() // 随机颜色
        this.ctx.fillRect(a.pageX-8,a.pageY-10,16,10) // 绘制的方形
        this.ctx.fillStyle = randomGrey()
        this.ctx.fillRect(a.pageX-8,a.pageY,16,10)
    },
    _drawLineMove: function(a) {
        this.ctx.lineCap = "square",
        this.ctx.fillStyle = randomGrey()
        this.ctx.fillRect(a.pageX-8,a.pageY-10,16,10)
        this.ctx.fillStyle = randomGrey()
        this.ctx.fillRect(a.pageX-8,a.pageY,16,10)
    },
    _drawLineUp: function(a) {
        this.ctx.closePath(),
        this._addUndo()
    },
    function randomGrey(){
    	//十六进制颜色随机
    	var r = Math.floor(Math.random()*256);
    	var g = r;
    	var b = r;
    	var color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
    	return color;
    }

#### 效果 ####

![在这里插入图片描述][20190530115420959.gif]

#### 总结 ####

这一块总是遇到问题，有时候都觉得不可能是那个原因导致的，所以不去尝试，比如图片跨域的问题，我觉得不会跨域，所以我一直没有去这样改，后来直到实在解决不了了，兔子说试一下，结果就好了，很多时候，遇到问题多尝试把，然后，多读文档跨域的问题文档也有说明，但是我还是搞了很久，关于模糊的问题，主要解决的是兔子，附上的图也是出自他手，我只是一个搬运工。

[http_html2canvas.hertzen.com_configuration]: http://html2canvas.hertzen.com/configuration
[20190530104009108.png]: /images/20220126/a812ae30efba4b288f2fb6e405fe39c3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vb29ueXVhbg_size_16_color_FFFFFF_t_70]: /images/20220126/23ce6daa421f453e96e2bb78004550c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vb29ueXVhbg_size_16_color_FFFFFF_t_70 1]: /images/20220126/fc144c9c9453423c9b885cd9fae23be1.png
[20190530115420959.gif]: /images/20220126/281e6622a8ed43bba0d982003764ce7d.png