html2canvas.js（下载地址）

https://html2canvas.hertzen.com/

saveFile.js（下载图片）

var saveAs = saveAs || function (e) {
    "use strict";
    if (typeof e === "undefined" || typeof navigator !== "undefined" && /MSIE [1-9]\./.test(navigator.userAgent)) {
        return
    }
    var t = e.document, n = function () {
            return e.URL || e.webkitURL || e
        }, r = t.createElementNS("http://www.w3.org/1999/xhtml", "a"), o = "download" in r, a = function (e) {
            var t = new MouseEvent("click");
            e.dispatchEvent(t)
        }, i = /constructor/i.test(e.HTMLElement) || e.safari, f = /CriOS\/[\d]+/.test(navigator.userAgent),
        u = function (t) {
            (e.setImmediate || e.setTimeout)(function () {
                throw t
            }, 0)
        }, s = "application/octet-stream", d = 1e3 * 40, c = function (e) {
            var t = function () {
                if (typeof e === "string") {
                    n().revokeObjectURL(e)
                } else {
                    e.remove()
                }
            };
            setTimeout(t, d)
        }, l = function (e, t, n) {
            t = [].concat(t);
            var r = t.length;
            while (r--) {
                var o = e["on" + t[r]];
                if (typeof o === "function") {
                    try {
                        o.call(e, n || e)
                    } catch (a) {
                        u(a)
                    }
                }
            }
        }, p = function (e) {
            if (/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(e.type)) {
                return new Blob([String.fromCharCode(65279), e], {type: e.type})
            }
            return e
        }, v = function (t, u, d) {
            if (!d) {
                t = p(t)
            }
            var v = this, w = t.type, m = w === s, y, h = function () {
                l(v, "writestart progress write writeend".split(" "))
            }, S = function () {
                if ((f || m && i) && e.FileReader) {
                    var r = new FileReader;
                    r.onloadend = function () {
                        var t = f ? r.result : r.result.replace(/^data:[^;]*;/, "data:attachment/file;");
                        var n = e.open(t, "_blank");
                        if (!n) e.location.href = t;
                        t = undefined;
                        v.readyState = v.DONE;
                        h()
                    };
                    r.readAsDataURL(t);
                    v.readyState = v.INIT;
                    return
                }
                if (!y) {
                    y = n().createObjectURL(t)
                }
                if (m) {
                    e.location.href = y
                } else {
                    var o = e.open(y, "_blank");
                    if (!o) {
                        e.location.href = y
                    }
                }
                v.readyState = v.DONE;
                h();
                c(y)
            };
            v.readyState = v.INIT;
            if (o) {
                y = n().createObjectURL(t);
                setTimeout(function () {
                    r.href = y;
                    r.download = u;
                    a(r);
                    h();
                    c(y);
                    v.readyState = v.DONE
                });
                return
            }
            S()
        }, w = v.prototype, m = function (e, t, n) {
            return new v(e, t || e.name || "download", n)
        };
    if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob) {
        return function (e, t, n) {
            t = t || e.name || "download";
            if (!n) {
                e = p(e)
            }
            return navigator.msSaveOrOpenBlob(e, t)
        }
    }
    w.abort = function () {
    };
    w.readyState = w.INIT = 0;
    w.WRITING = 1;
    w.DONE = 2;
    w.error = w.onwritestart = w.onprogress = w.onwrite = w.onabort = w.onerror = w.onwriteend = null;
    return m
}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content);
if (typeof module !== "undefined" && module.exports) {
    module.exports.saveAs = saveAs
} else if (typeof define !== "undefined" && define !== null && define.amd !== null) {
    define("FileSaver.js", function () {
        return saveAs
    })
}

使用：

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>html2canvas</title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/html2canvas.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/saveFile.js" type="text/javascript" charset="utf-8"></script>
		<style>
			#capture {
				position: relative;
				background-color: transparent
			}
			
			.img2 {
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.box {
				width: 100px;
				height: 100px;
				background-color: transparent ;position: absolute;
			}
		</style>
		<link rel="stylesheet" href="style.css">
	</head>

	<body>
		<div style="padding: 10px;" id="capture">
			<img src="http://localhost:8084/aleutian/img/流场/季/阿留申海域春季0m层流场.png" class="img1" style="width: 500px; height: 400px;" />
			<img src="img/floor1-03.jpg" class="img2" />
		</div>
		<div id="box">

		</div>
		<img src="img/floor1-03.jpg" id="aa" />
		<canvas id="mycvs" width="500" height="600"></canvas>
		<button class="zhuanma">转码</button>
		<button class="export1">导出转码的img</button>
		<button class="btn">截取div</button>
		<button class="export2">导出截取的div img</button>
		<script>
			//			点击转码  将网络图片转成Base64
			var cvs = document.getElementById('mycvs');
			var ctx = cvs.getContext('2d');
			$(".zhuanma").click(function() {
				// let imgUrl = "http://localhost:8084/aleutian/img/流场/季/阿留申海域春季0m层流场.png"; //请求到的图片路径
                let imgUrl="https://fastmarket.oss-cn-shenzhen.aliyuncs.com/oss/static/other/1/images/baseMap_index.jpg"
				if(imgUrl != "") {
					let image = new Image();
					image.src = imgUrl + "?v=" + Math.random(); // 处理缓存
					image.crossOrigin = "*"; // 支持跨域图片
					image.onload = function() {
						let base64 = getBase64Image(image); //调用函数并将其转为base64图片
						ctx.drawImage(image, 0, 0, 500, 600); //将生成的图片放在canvas中
					};
				}
			})
			//			点击  导出转码的img
			$(".export1").click(function() {
				cvs.toBlob(function(blob) {
					saveAs(blob, 'map.png');
				});
			})
			//			截图 截整个div
			$(".btn").click(function() {
				html2canvas(document.querySelector("#aa")).then((canvas) => {
					$("#box").append(canvas);
				});
			})
			//点击导出截取的div
			$(".export2").click(function() {
				var cvs1 = document.querySelector("#box>canvas")
				cvs1.toBlob(function(blob) {
					saveAs(blob, 'map.png');
				});
			})
			//			将网络图片转成Base64
			function getBase64Image(img) {
				let canvas = document.createElement("canvas");
				canvas.width = img.width;
				canvas.height = img.height;
				let ctx = canvas.getContext("2d");
				ctx.drawImage(img, 0, 0, img.width, img.height);
				let ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
				let dataURL = canvas.toDataURL("image/" + ext);
				return dataURL;
			}

			//			方法二
			// 截图弹窗
			//			var cvs = document.getElementById('mycvs');
			//			var ctx = cvs.getContext('2d');
			//			var w, h;
			//			var printIdx;
			//			publicFun.opendPrintFun = function(cvsUrl) {
			//				if($('#printAlert').attr("data-show") == '0') {
			//					printIdx = layer.open({
			//						type: 1,
			//						title: false,
			//						content: $("#printAlert"), //这里content是一个DOM
			//						area: ['486px', "440px"], // 宽高
			//						skin: 'layui-layer-lan',
			//						id: "printalert", // 用于控制弹层唯一标识
			//						offset: "rt2",
			//						closeBtn: 1,
			//						shade: 0,
			//						shadeClose: true,
			//						resize: false,
			//						anim: 5,
			//						moveOut: true,
			//						isOutAnim: false,
			//						cancel: function(index, layero) {
			//
			//						},
			//						success: function(layero, index) { // 层弹出后的成功回调方法
			//							$('#printAlert').attr("data-show", "1")
			//							$("#printalert").parent().css("background-color", 'transparent')
			//							cvs.width = cvsUrl.width;
			//							cvs.height = cvsUrl.height;
			//							ctx.putImageData(cvsUrl, 0, 0);
			//							var left1 = Math.floor(cvsUrl.width * 0.1)
			//							var w = Math.floor(cvsUrl.width * 0.8);
			//							var h = Math.floor(w * 0.096);
			//
			//							var img = new Image(); //logo
			//							img.src = "../img/proTitle.png"
			//							img.onload = function() {
			//								// 将图片画到canvas上面上去！
			//								ctx.drawImage(img, left1, 10, w, h);
			//							}
			//							var imgUrl = cvs.toDataURL("image/png");
			//							$(".print-map").attr("src", imgUrl);
			//							if(cvsUrl.width >= cvsUrl.height) {
			//								$(".print-map").css({
			//									"width": "100%",
			//									"height": "auto"
			//								});
			//							} else {
			//								$(".print-map").css({
			//									"width": "auto",
			//									"height": "340px"
			//								});
			//							}
			//							setTimeout(function() {
			//								var logoW = Math.floor($(".print-map").width() * 0.8)
			//								var logoH = Math.floor((logoW * 0.096))
			//								$(".print-logo").css({
			//									width: logoW + "px",
			//									height: logoH + "px",
			//								})
			//							}, 100)
			//
			//						},
			//						end: function() {
			//							$(".right-list .print-icon").removeClass("activeClick");
			//							$('#printAlert').attr("data-show", "0")
			//							mapApp.mapping(0);
			//						}
			//					});
			//				} else {
			//					cvs.width = cvsUrl.width;
			//					cvs.height = cvsUrl.height;
			//					ctx.putImageData(cvsUrl, 0, 0);
			//
			//					var left1 = Math.floor(cvsUrl.width * 0.1)
			//					var w = Math.floor(cvsUrl.width * 0.8);
			//					var h = Math.floor(w * 0.096);
			//
			//					var img = new Image();
			//					img.src = "../img/proTitle.png"
			//
			//					img.onload = function() {
			//						// 将图片画到canvas上面上去！
			//						ctx.drawImage(img, left1, 10, w, h);
			//
			//					}
			//
			//					var imgUrl = cvs.toDataURL("image/png");
			//					$(".print-map").attr("src", imgUrl);
			//					if(cvsUrl.width >= cvsUrl.height) {
			//						$(".print-map").css({
			//							"width": "100%",
			//							"height": "auto"
			//						});
			//
			//					} else {
			//						$(".print-map").css({
			//							"width": "auto",
			//							"height": "340px"
			//						});
			//
			//					}
			//					setTimeout(function() {
			//						var logoW = Math.floor($(".print-map").width() * 0.8)
			//						var logoH = Math.floor((logoW * 0.096))
			//						$(".print-logo").css({
			//							width: logoW + "px",
			//							height: logoH + "px",
			//						})
			//					}, 100)
			//
			//				}
			//
			//			};
			//			// 截图弹窗关闭
			//			publicFun.closePrintFun = function() {
			//				printIdx = $("#printalert").parent().attr("times");
			//				layer.close(printIdx);
			//			};
			//			// 截图弹窗 点击截图按钮
			//			$("#confirmPrint").click(function() {
			//				mapApp.mapping(1);
			//			})
			//			// 截图弹窗 点击导出按钮
			//			$("#exportPrint").click(function() {
			//				cvs.toBlob(function(blob) {
			//					saveAs(blob, 'map.png');
			//				});
			//				ctx.clearRect(0, 0, w, h);
			//			})
		</script>
	</body>

</html>