标签：function canvas img cvsUrl 截图 js width var height

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>

标签：function,canvas,img,cvsUrl,截图,js,width,var,height
来源： https://blog.csdn.net/weixin_45264424/article/details/123063460

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。