工具：html2canvas、canvas2image、vue
思路：用html2canvas将整个页面的dom转换为canvas，再用canvas2image将canvas转成图片，鼠标点击截图将取到截图区域的坐标，利用canvas的drawImage方法，截取图片生成新的canvas，再用canvas2image将新生成的canvas转成图片
具体步骤：
1. 安装html2canvas、canvas2image
npm install html2canvas --save
npm install canvas2image --save
安装canvas2image后运行的时候，如果报错
image.png
在node_modules/canvas2image/canvas2image.js后面加上
export default Canvas2Image;
2.引用html2canvas、canvas2image
import html2canvas from 'html2canvas';
import canvasToImage from 'canvas2image';
3.点击截图按钮时，用html2canvas将整个页面的dom转换为canvas
var test = document.querySelector('body');
//将jQuery对象转换为dom对象
html2canvas(test).then(function(canvas) {
// canvas宽度
canvasWidth = canvas.width;
// canvas高度
canvasHeight = canvas.height;
canvas.id = 'myCanvas';
//生成canvas元素，并设置样式，用canvas将页面遮住
test.appendChild(canvas);
})
#myCanvas {
position: absolute;
top: 0;
left: 0;
z-index: 9998;
overflow: hidden;
}
4.按住鼠标左键选区截图区域，获取截图区域坐标，利用canvas的drawImage方法，截取图片生成新的canvas，再用canvas2image将新生成的canvas转成图片
screenShot(){
let _this = this;
this.cutFlag = true;
var img,canvasWidth,canvasHeight;
var test = document.querySelector('body'); //将jQuery对象转换为dom对象
html2canvas(test).then(function(canvas) {
// canvas宽度
canvasWidth = canvas.width;
// canvas高度
canvasHeight = canvas.height;
canvas.id = 'myCanvas';
test.appendChild(canvas);
img = canvasToImage.convertToImage(canvas,canvasWidth, canvasHeight);
var wId = "w";
var index = 0;
var startX = 0,startY = 0;
var flag = false;
var retcLeft = "0px",retcTop = "0px", retcHeight = "0px",retcWidth = "0px";
var canvasLeft = 0,canvasTop = 0,canvasHeight = 0,canvasWidth = 0;
document.onmousedown = function(e) {
if(!flag && _this.cutFlag){
flag = true;
try {
var evt = window.event || e;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
startX = evt.clientX + scrollLeft;
startY = evt.clientY + scrollTop;
index++;
var div = document.createElement("div");
div.id = wId + index;
div.className = "div";
div.style.marginLeft = startX + "px";
div.style.marginTop = startY + "px";
document.body.appendChild(div);
} catch (e) {
}
} else{
flag = false;
}
}
document.onmouseup = function(e) {
if (flag&& _this.cutFlag) {
try {
var evt = window.event || e;
if(startX !== evt.clientX || startY!== evt.clientY){
_this.cutFlag = false;
var arr = document.getElementsByClassName("div");
for(let i=0; i<arr.length; i++){
if (arr[i] != null){
arr[i].parentNode.removeChild(arr[i]);
}
}
var retCanvas = document.createElement('canvas');
var retCtx = retCanvas.getContext('2d');
retCanvas.width = canvasWidth;
retCanvas.height = canvasHeight;
retCanvas.style.background="#ffffff";
retCtx.drawImage(img, canvasLeft,canvasTop,canvasWidth,canvasHeight,0,0,canvasWidth,canvasHeight);
var img2 = canvasToImage.convertToImage(retCanvas, canvasWidth, canvasHeight);
_this.confirm(_this.convertBase64UrlToBlob(img2.src));
var canvas2 = document.querySelector('#myCanvas');
canvas2.remove();
} else {
_this.cutFlag = false;
var arr = document.getElementsByClassName("div");
for(let i=0; i<arr.length; i++){
if (arr[i] != null){
arr[i].parentNode.removeChild(arr[i]);
}
}
if(document.querySelector('#myCanvas')){
var canvas2 = document.querySelector('#myCanvas');
canvas2.remove();
}
}
} catch (e){}
}else{
var arr = document.getElementsByClassName("div");
for(let i=0; i<arr.length; i++){
if (arr[i] != null){
arr[i].parentNode.removeChild(arr[i]);
}
}
if(document.querySelector('#myCanvas')){
var canvas2 = document.querySelector('#myCanvas');
canvas2.remove();
}
}
}
document.onmousemove = function(e) {
if (flag&& _this.cutFlag) {
try {
var evt = window.event || e;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
retcLeft = (startX - evt.clientX - scrollLeft > 0 ? evt.clientX + scrollLeft : startX) + "px";
canvasLeft = startX - evt.clientX - scrollLeft > 0 ? evt.clientX + scrollLeft : startX;
retcTop = (startY - evt.clientY - scrollTop > 0 ? evt.clientY + scrollTop : startY) + "px";
canvasTop = startY - evt.clientY - scrollTop > 0 ? evt.clientY + scrollTop : startY;
retcHeight = Math.abs(startY - evt.clientY - scrollTop) + "px";
canvasHeight = Math.abs(startY - evt.clientY - scrollTop);
retcWidth = Math.abs(startX - evt.clientX - scrollLeft) + "px";
canvasWidth = Math.abs(startX - evt.clientX - scrollLeft);
$(wId + index).style.marginLeft = retcLeft;
$(wId + index).style.marginTop = retcTop;
if(evt.clientX > window.innerWidth){
$(wId + index).style.width = window.innerWidth - retcLeft;
} else {
$(wId + index).style.width = retcWidth;
}
if(evt.clientY > window.innerHeight){
$(wId + index).style.height = window.innerHeight - retcTop;
} else {
$(wId + index).style.height = retcHeight;
}
} catch (e) {
//alert(e);
}
}
}
var $ = function(id) {
return document.getElementById(id);
}
}).catch({});
},
//将base64图片转为blob格式
convertBase64UrlToBlob(dataurl) {
try{
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: 'image/png'
});
} catch(err) {
console.log(err.message);
}
},
//图片发送
confirm(file){
this.upload(file);
}
网友评论