js实现选区截图

工具：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 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);
}