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<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);
}