screenshotsPrint

Modified from https://www.jianshu.com/p/8c43576bdbe3
目前为 2023-04-27 提交的版本。查看最新版本。
此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.gf.qytechs.cn/scripts/464944/1182064/screenshotsPrint.js
提问、发表评价，或者举报这个脚本。
Wrap lines
/**
 * 默认画笔线宽
 * @type {number}
 */
var defaultStrokeWidth = 1; //画矩形选取框的线宽
 
/**
 * 选取划线的canvasExt
 * @type {{drawRect: canvasExt.drawRect}}
 */
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,  //跨域使用
        // foreignObjectRendering: 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
        }
        printClip(canvas, capture_x, capture_y, Math.abs(width), Math.abs(height))
      });
      // 移除画的选取框
      $("#" + canvasId).removeLayer('areaLayer');
      // 隐藏用于华画取框的canvas
      $("#" + canvasId).hide()
    }
  }
};
 
/**
 * 选取截屏
 * @param canvasId
 */
function clipScreenshots(canvasId) {
  canvasExt.drawRect(canvasId, "red", defaultStrokeWidth);
}
 
/**
 * 打印截取区域
 * @param canvas 截取的canvas
 * @param capture_x 截取的起点x
 * @param capture_y 截取的起点y
 * @param capture_width 截取的起点宽
 * @param capture_height 截取的起点高
 */
function printClip(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()
  // // 生成图片
  // var clipImg = new Image()
  // clipImg.src = clipImgBase64
  // var con = confirm('打印截图吗?取消则保存截图')
  // if (con) {
  //   $(clipImg).print()
  // } else {
  //   downloadIamge(clipImgBase64)
  // }
 
  // alert二维码解析内容
  const qrcode = new QRCode.Decoder();
  qrcode
    .scan(clipImgBase64)
    .then(result => {
      console.log(result.data);
      alert(result.data)
    })
    .catch(error => {
      console.error(error);
      alert("出错：" + error)
    });
}
 
/**
 * 下载保存图片
 * @param imgUrl 图片地址
 */
function downloadIamge(imgUrl) {
  // 图片保存有很多方式，这里使用了一种投机的简单方法。
  // 生成一个a元素
  var a = document.createElement('a')
  // 创建一个单击事件
  var event = new MouseEvent('click')
  // 生成文件名称
  var timestamp = new Date().getTime();
  var name = imgUrl.substring(22, 30) + timestamp + '.png';
  a.download = name
  // 将生成的URL设置为a.href属性
  a.href = imgUrl;
  // 触发a的单击事件 开始下载
  a.dispatchEvent(event);
}
欢迎访问Greasy Fork镜像
