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

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

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

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

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

html2canvas转模糊
wPaint转模糊

html2canvas转模糊

解决办法：

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

let imgDom = $(“#html2canvas”);
let width = imgDom.width();//dom宽
let height = imgDom.height();//dom高
// 获取像素比
const scaleBy = window.devicePixelRatio
let canvas = document.createElement(‘canvas’);
canvas.width = width scaleBy;//canvas宽度
canvas.height = height scaleBy;//canvas高度
canvas.style.width = ${width}px;
canvas.style.height = ${width}px;
canvas.getContext(“2d”).scale(scaleBy, scaleBy);

html2canvas(imgDom[0],{
```
useCORS:true, // 解决图片跨域
 canvas:canvas,
}).then(function(canvas) {
this.img = canvas.toDataURL()
```
}）

出现的问题

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

引起的原因

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

解决办法

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

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的坐标点不同
在这里插入图片描述

解决办法：

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

修改代码

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;

}

效果

在这里插入图片描述

总结

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