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