【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;
}

效果

总结

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