Leaflet框选载图 网页框选载图 -- 类似QQ载图功能

实现截图(红框中即是将要截取的内容)

下载到本地的截图

功能需求

近日。 项目中有一需求：在Leaflet地图中进行框选载图，同时把地图中的所有标记和图形一同载图，并下载到本地。

搜索资源

在网上搜索了一下，找到一个载图的js库 html2canvs。网上的大部分例子都是基于html2canvas来完成的。找一圈并未找到现成的轮子，那就自己造一个吧。

功能拆分

框选：绘制矩形 ------» 载图：html2canvas -----»下载：生成a标签 -----» 模拟点击：下载完成。大致应该是上面三个步骤。

1. 框选：绘制矩形。文中使用的绘制插件是：Leaflet.draw。
   代码如下：

        // 矩形实例
        let rectangle = new L.Draw.Rectangle(this.map, {
          shapeOptions: {
            stroke: true,
            color: 'red',
            weight: 2,
            opacity: 0.9,
            fill: true,
            fillColor: null, /*same as color by default*/
            fillOpacity: 0.1,
            clickable: true
          }
        });
        rectangle.enable(); //绘制矩形
        this.map.on(L.Draw.Event.CREATED, (e) => {
          if (this.currentLayerType == type && e.layerType == 'rectangle'){
            this.featureGroup.addLayer(e.layer);
            if (!e.layer.flag){
              this.$confirm('是否下载本次截图', '提示', {
                confirmButtonText: '下载',
                cancelButtonText: '取消',
                type: 'warning',
                showClose:false,
                center: true
              }).then(() => {
                let latlngs = e.layer._latlngs[0]   // 获取矩形的 经纬度 list
                // console.log(latlngs)
                this.featureGroup.removeLayer(e.layer); // 移除框选的矩形
                this.captureScreenEnd(latlngs);    // 开始截图
                this.$message({
                  type: 'success',
                  message: '下载成功!',
                  offset:100
                });
              }).catch(() => {
                this.featureGroup.removeLayer(e.layer);
              });
            }
            e.layer.flag = true
          }
        });
        this.map.on(L.Draw.Event.DRAWSTOP, (e)=> {
          console.log('框选截图结束====')
          rectangle.disable()
        });
        

2. 截图 ： 功能核心代码。
   代码如下：

        let bounds = this.map.getBounds(),
            zero = [bounds._northEast.lat,bounds._southWest.lng],
             // 计算当前 视窗内的 原点经纬度 ==> 对应的屏幕坐标 （地图位移及缩放时计算 startPoint的偏移量）必须！！！
            zeroPoint = map.latLngToLayerPoint(zero) 
        let startPoint = map.latLngToLayerPoint(points[1]), // latlng 转 屏幕坐标 计算 起点及宽高
            endPoint =  map.latLngToLayerPoint(points[3]),
            width = Math.abs(startPoint.x - endPoint.x),
            height = Math.abs(startPoint.y - endPoint.y);

        html2canvas(document.getElementById('map'),{
          useCORS:true, // 底图跨域 必须！！
          // allowTaint:false
        }).then((canvas) => {
          this.downloadIamge(canvas,(startPoint.x - zeroPoint.x),(startPoint.y - zeroPoint.y),width,height)
          this.resetToolbar()
        });

3. 下载：截图下载
   代码如下：

        // 创建一个用于截取的canvas
        var clipCanvas = document.createElement('canvas')
        clipCanvas.width = capture_width
        clipCanvas.height = capture_height
        // 截取图片
        clipCanvas.getContext('2d').drawImage(canvas, capture_x, capture_y, capture_width, capture_height, 0, 0, capture_width, capture_height)
        var clipImgBase64 = clipCanvas.toDataURL() // 生成图片url

        // 下载图片
        let link = document.createElement("a");
        link.href = clipImgBase64;//下载链接
        link.setAttribute("download", new Date().toLocaleString() + "_截图.png");
        link.style.display = "none";//a标签隐藏
        document.body.appendChild(link);
        link.click(); // 点击下载
        document.body.removeChild(link); // 移除a标签
	

进阶功能

此功能是基于地图矩形绘制来实现的。如果要实际网页版的框选截图如何实现？原理都是一样的，只是第一步的框选用canvas来进行绘制就可以了。本文使用的是jcanvas，核心代码如下：

import html2canvas from 'html2canvas'

export const screenShot = {
    /**
     *  画矩形
     * @param canvasId canvasId
     * @param penColor 画笔颜色
     * @param strokeWidth 线宽
     */
    cancelFlag: false, // 是否可以进行截图操作
    defaultStrokeWidth: 1, // 默认画矩形选取框的线宽
    defaultLineColor: 'blue',
    init: function (canvasId, targetId) {
        var that = this;
        // 注册 esc 监控取消事件
        $("#" + canvasId).show()
        document.body.style.cursor = 'crosshair';
        that.cancelFlag = true
    },
    drawRect: function (canvasId, targetId, penColor, strokeWidth, callback) {
        var that = this;
        that.init(canvasId, targetId);
        that.penColor = penColor || that.defaultLineColor;
        that.penWidth = strokeWidth || that.defaultStrokeWidth;
        var canvas = document.getElementById(canvasId);
        //canvas 的矩形框
        var canvasRect = canvas.getBoundingClientRect();
        //canvas 矩形框的左上角坐标
        var canvasLeft = canvasRect.left;
        var canvasTop = canvasRect.top;

        // 要画的矩形的起点 xy
        var x = 0;
        var y = 0;

        document.addEventListener('keydown', function (e) {
            //此处填写你的业务逻辑即可
            if (e.keyCode == 27) {
                that.cancel(canvasId, callback);
                x = e.clientX - canvasLeft;
                y = e.clientY - canvasTop;
            }
        })
        //鼠标点击按下事件，画图准备
        canvas.onmousedown = function (e) {
            if (!that.cancelFlag) {
                return
            }
            //设置画笔颜色和宽度
            var color = that.penColor;
            var penWidth = that.penWidth;
            // 确定起点
            x = e.clientX - canvasLeft;
            y = e.clientY - canvasTop;
            console.log('down=====>', x, y)
            // 添加layer
            $("#" + canvasId).addLayer({
                type: 'rectangle',
                strokeStyle: color,
                strokeWidth: penWidth,
                name: 'areaLayer',
                fromCenter: false,
                x: x, y: y,
                width: 1,
                height: 1
            });
            // 绘制
            $("#" + canvasId).drawLayers();
            $("#" + canvasId).saveCanvas();

            //鼠标移动事件，画图
            canvas.onmousemove = function (e) {

                // 要画的矩形的宽高
                var width = e.clientX - canvasLeft - x;
                var height = e.clientY - canvasTop - y;
                console.log('move=====>', width, height)
                // 清除之前画的
                $("#" + canvasId).removeLayer('areaLayer');

                $("#" + canvasId).addLayer({
                    type: 'rectangle',
                    strokeStyle: color,
                    strokeWidth: penWidth,
                    name: 'areaLayer',
                    fromCenter: false,
                    x: x, y: y,
                    width: width,
                    height: height,
                });

                $("#" + canvasId).drawLayers();
            }
        };
        //鼠标抬起
        canvas.onmouseup = function (e) {
            if (!that.cancelFlag) {
                return
            }
            var color = that.penColor;
            var penWidth = that.penWidth;

            canvas.onmousemove = null;
            console.log('up=====>', x, y)
            var width = e.clientX - canvasLeft - x;
            var height = e.clientY - canvasTop - y;

            $("#" + canvasId).removeLayer('areaLayer');

            $("#" + canvasId).addLayer({
                type: 'rectangle',
                strokeStyle: color,
                strokeWidth: penWidth,
                name: 'areaLayer',
                fromCenter: false,
                x: x, y: y,
                width: width,
                height: height
            });

            $("#" + canvasId).drawLayers(); // 绘制矩形
            $("#" + canvasId).saveCanvas(); // 保存矩形

            // 把body转成canvas
            html2canvas(document.getElementById(targetId), {
                scale: 1,
                // allowTaint: true,
                useCORS: true  //跨域使用
            }).then(canvas => {
                var capture_x, capture_y
                if (width > 0) {
                    //从左往右画
                    capture_x = x + that.penWidth
                } else {
                    //从右往左画
                    capture_x = x + width + that.penWidth
                }
                if (height > 0) {
                    //从上往下画
                    capture_y = y + that.penWidth
                } else {
                    //从下往上画
                    capture_y = y + height + that.penWidth
                }
                that.printClip(canvas, capture_x, capture_y, Math.abs(width), Math.abs(height))
            });
            that.cancel(canvasId, callback)
            callback && callback();
        }
    },
    // 结束 取消截图
    cancel: function (canvasId, callback) {
        document.body.style.cursor = 'auto'
        $("#" + canvasId).removeLayer('areaLayer');
        $("#" + canvasId).clearCanvas()
        $("#" + canvasId).hide()
        this.cancelFlag = false
        callback && callback()
    },
    /**
     * 截取区域转为图片
     * @param canvas 截取的canvas
     * @param capture_x 截取的起点x
     * @param capture_y 截取的起点y
     * @param capture_width 截取的起点宽
     * @param capture_height 截取的起点高
     */
    printClip: function (canvas, capture_x, capture_y, capture_width, capture_height) {
        // 创建一个用于截取的canvas
        var clipCanvas = document.createElement('canvas')
        clipCanvas.width = capture_width
        clipCanvas.height = capture_height
        // 截取
        clipCanvas.getContext('2d').drawImage(canvas, capture_x, capture_y, capture_width, capture_height, 0, 0, capture_width, capture_height)
        var clipImgBase64 = clipCanvas.toDataURL()

        this.downloadIamge(clipImgBase64) // 下载图片

    },
    /**
     * 下载保存图片
     * @param imgUrl 图片地址
     */
    downloadIamge: function (imgUrl) {
        let link = document.createElement("a");
        link.href = imgUrl;//下载链接
        link.setAttribute("download", new Date().toLocaleString() + "_截图.png");
        link.style.display = "none";//a标签隐藏
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link)
    }
};

结束语

好了。框选截图的功能基就写完了，希望本文对您在关于地图及cavnas有一个简单的了解。

感谢您的阅读，希望本文对您有所帮助。 —— chysxslt