手动绘制仿qq截屏效果

因我司业务需要，现在在electron端需要开发仿qq截屏功能，（其实window端已经实现，具体实现方案可以看前面一篇文章~），现在需要手动使用canvas做一个仿qq截图功能的截屏效果，不说了，直接入正题。。。。

其中有部分效果参考了其他博客文章 https://www.cnblogs.com/ygtq-island/p/7676564.html，（部分算法实在是写起来麻烦，于是就把人家的源码拿过来用啦~嘿嘿）先看一个效果图

其中马赛克和箭头的部分实现起来是花费了挺多时间的，首先是截取全屏，通过调用electron的api截取全屏图片数据：

然后在当前屏幕里面创建遮罩层区域，根据在鼠标点击遮罩层事件开始划分截图的矩形并生成同样大小的canvas画布，根据矩形的起始坐标和宽高可以算出画布在全屏截图中的位置，并通过canvas的drawImage属性将图片画到canvas中去，并同时在画布下创建按钮区域，接下来就是开始做各种编辑操作了编辑

本次案例中一共使用了两块画布，也就是说生成了2个canvas，先生成canvas01,这个是基本的canvas，最后获取截图数据就是通过它来获取的，文字编辑功能和马赛克功能目前是在此canvas01上完成

文字编辑功能：

createTextEvent(target) { // 绘制文字事件

this.btnFn(target).then(() => {

let that = this;

let textX, textY;

let nowColor = '#FF0F00'

that.canvasResult.onmousedown = function(ev) {

let input_dx = ev.clientX

let input_dy = ev.clientY

textX = input_dx

textY = input_dy-15

$("body").append(`

</div>

sendDom()

}

that.canvasResult.onmouseup = function(ev) {

that.canvasResult.onmousedown = null

}

let sendDom = function() {

$('.text-color-choose ul li').click(function() {

nowColor = $(this).attr('colors')

console.log(nowColor)

$(this).addClass('on').siblings().removeClass('on')

$('.font-group .draw-text').css({color: nowColor})

})

$('.font-group .draw-text-move').mousedown(function(ev) {

ev.stopPropagation()

let dx = ev.clientX - that.canvasResult.offsetLeft

let dy = ev.clientY - that.canvasResult.offsetTop

let input_dx = $('.font-group').offset().left

let input_dy = $('.font-group').offset().top

document.onmousemove = function(ev) {

let mx = ev.clientX - dx - that.canvasResult.offsetLeft

let my = ev.clientY - dy - that.canvasResult.offsetTop

textX = input_dx+mx

textY = input_dy+my

$('.font-group').css({left: input_dx+mx+'px', top: input_dy+my+'px'})

}

document.onmouseup = function(ev) {

document.onmousemove = null

document.onmouseup = null

}

})

$('.font-group .draw-text-define').click(function(ev) {

let input_test = $('.font-group .draw-text').val()

that.ctx.strokeStyle=nowColor;

that.ctx.font="18px Arial";

console.log(textX)

console.log(textY)

that.ctx.strokeText(input_test, textX - that.canvasResult.offsetLeft, textY - that.canvasResult.offsetTop+15);

let fontGroup = document.getElementsByClassName('font-group')[0]

if (!fontGroup) return

document.getElementsByTagName('body')[0].removeChild(fontGroup)

})

}

})

}

在canvas中生成一个文字编辑区块，也可以自行选择颜色，最终获取到input中的val，通过ctx.strokeText绘制到canvas中；

马赛克功能：

this.btnFn(target).then(() => {

let that = this

var lastImgArr = []; //修改缓存

canvasResult.onmousedown = function(ev) {

var modifyImgData = that.ctx.getImageData(0, 0, that.canvasResult.width, that.canvasResult.height);

lastImgArr.push(modifyImgData); //每次下笔前先保存

var ev=ev || window.event;

var dx = ev.clientX-canvasResult.offsetLeft;

var dy = ev.clientY-canvasResult.offsetTop;

drawLine(that.Img,dx,dy, that.ctx, that.canvasResult, that.quan, that.num);

document.onmousemove = function(ev) {

var ev = ev || window.event;

var mx = ev.clientX - that.canvasResult.offsetLeft;

var my = ev.clientY - that.canvasResult.offsetTop;

if (

Math.pow(dx - mx, 2) + Math.pow(dy - my, 2) >=

Math.pow(that.quan * that.num, 2)

) {

//(quan*马赛克个数*2)的平方

drawLine(that.Img, mx, my, that.ctx, that.canvasResult, that.quan, that.num);

dx = mx;

dy = my;

}

};

document.onmouseup = function() {

document.onmousemove = null;

document.onmouseup = null;

};

}

})

function drawLine(obj, dx, dy, context, canvas, quan, num) {

//原始图像

var originalImgData = context.getImageData(

canvas.width,

canvas.height

);

var originalPxData = originalImgData.data;

//用于循环修改

var modifyImgData = context.getImageData(

canvas.width,

canvas.height

);

var modifyPxData = modifyImgData.data;

for (

var i = dx - quan * num;

i < dx + quan * num;

i = i + 2 * quan + 1

) {

for (

var j = dy - quan * num;

j < dy + quan * num;

j = j + 2 * quan + 1

) {

//中心点(dx,dy)

// if(Math.pow(i-dx,2)+Math.pow(j-dy,2) <= Math.pow(quan*num/2,2)){

if (

(i == dx - quan * num && j == dy - quan * num) ||

(i == dx - quan * num &&

j == dy - quan * num + 2 * quan + 1) ||

(i == dx - quan * num &&

j == dy - quan * num + 4 * quan + 2) ||

(i == dx - quan * num &&

j == dy - quan * num + 12 * quan + 6) ||

(i == dx - quan * num &&

j == dy - quan * num + 14 * quan + 7) ||

(i == dx - quan * num &&

j == dy - quan * num + 16 * quan + 8) ||