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