|
|
@@ -0,0 +1,165 @@
|
|
|
+$(function(){
|
|
|
+ let canvas = $("#bg_canvas");
|
|
|
+ if (canvas.length===0){
|
|
|
+ let canvas = $("<canvas id='bg_canvas' style='position: absolute;z-index: 500;left: 0;top: 0;width: 100%;height: 100%'></canvas>");
|
|
|
+ $("body").append(canvas);
|
|
|
+ }
|
|
|
+ var clientWidth = document.documentElement.clientWidth || document.body.clientWidth
|
|
|
+ var clientHeight = document.documentElement.clientHeight || document.body.clientHeight
|
|
|
+ // 更新canvas宽高
|
|
|
+ $("#bg_canvas").attr("width", clientWidth);
|
|
|
+ $("#bg_canvas").attr("height", clientHeight);
|
|
|
+ $("#bg_canvas").hide();
|
|
|
+});
|
|
|
+
|
|
|
+/**
|
|
|
+ * 默认画笔线宽
|
|
|
+ * @type {number}
|
|
|
+ */
|
|
|
+var defaultStrokeWidth = 1; //画矩形选取框的线宽
|
|
|
+
|
|
|
+var canvasExt = {
|
|
|
+ /**
|
|
|
+ * 画矩形
|
|
|
+ * @param canvasId canvasId
|
|
|
+ * @param penColor 画笔颜色
|
|
|
+ * @param strokeWidth 线宽
|
|
|
+ */
|
|
|
+ drawRect: function (canvasId, penColor, strokeWidth) {
|
|
|
+ var that = this;
|
|
|
+
|
|
|
+ that.penColor = penColor;
|
|
|
+ that.penWidth = strokeWidth;
|
|
|
+ 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;
|
|
|
+
|
|
|
+ //鼠标点击按下事件,画图准备
|
|
|
+ canvas.onmousedown = function(e) {
|
|
|
+
|
|
|
+ //设置画笔颜色和宽度
|
|
|
+ var color = that.penColor;
|
|
|
+ var penWidth = that.penWidth;
|
|
|
+ // 确定起点
|
|
|
+ x = e.clientX - canvasLeft;
|
|
|
+ y = e.clientY - canvasTop;
|
|
|
+ // 添加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;
|
|
|
+
|
|
|
+ // 清除之前画的
|
|
|
+ $("#"+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){
|
|
|
+
|
|
|
+ var color = that.penColor;
|
|
|
+ var penWidth = that.penWidth;
|
|
|
+
|
|
|
+ canvas.onmousemove = null;
|
|
|
+
|
|
|
+ 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.body, {
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ clipInfo = {
|
|
|
+ "x":capture_x,
|
|
|
+ "y":capture_y,
|
|
|
+ "w":Math.abs(width),
|
|
|
+ "h":Math.abs(height),
|
|
|
+ };
|
|
|
+ afterExt();
|
|
|
+ });
|
|
|
+ // 移除画的选取框
|
|
|
+ $("#"+canvasId).removeLayer('areaLayer');
|
|
|
+ // 隐藏用于华画取框的canvas
|
|
|
+ $("#"+canvasId).hide()
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+var afterExt = function (){};
|
|
|
+var clipInfo = {};
|
|
|
+/**
|
|
|
+ * 选取截屏
|
|
|
+ * @param canvasId
|
|
|
+ */
|
|
|
+function clipScreenshots(){
|
|
|
+ $("#bg_canvas").show()
|
|
|
+ canvasExt.drawRect("bg_canvas", "red", defaultStrokeWidth);
|
|
|
+}
|