htmlでキャンバスベースのスクリーンショットを行う小さなデモ

function screenShot(quickStartKey, EndKey) {
  // Compatibility considerations do not use... Extended String
  var keyLength = quickStartKey.length
  var isKeyTrigger = {}
  var cantStartShot = false
  ...
  quickStartKey.forEach(function(item) { // iterate through the array of parameters
    isKeyTrigger[item] = false // by default all keys in the array are not triggered
  })
  $('html').on('keyup', function(e) {
    var keyCode = e.which
    if(keyCode === EndKey) {
      ...
    } else if(!cantStartShot) {
      isKeyTrigger[keyCode] = true
      var notTrigger = Object.keys(isKeyTrigger).filter(function(item) {
        return isKeyTrigger[item] === false // check if there is a shortcut key that needs to be triggered
      })
      if(notTrigger.length === 0) { //no shortcut key to be triggered that can start the screenshot
        cantStartShot = true
        beginShot(cantStartShot)
      }
    }
  })

function beginShot(cantStartShot) {
    if(cantStartShot) {
        html2canvas(document.body, {
            onrendered: function(canvas) {
                // get a canvas image that matches the interface
            }
        })
    }
}

$('#' + canvasId).mousedown(function(e) {
    $("#"+canvasId).removeLayer(layerName) // remove the previous layer
    layerName += 1
    startX = that._calculateXY(e).x //calculate mouse position
    startY = that._calculateXY(e).y
    isShot = true
    $("#"+canvasId).addLayer({
        type: 'rectangle', //rectangle
        ...
        name:layerName, //the name of the layer
        x: startX,
        y: startY,
        width: 1,
        height: 1
    })
}).mousemove(function(e) {
    if(isShot) {
        $("#"+canvasId).removeLayer(layerName)
        var moveX = that._calculateXY(e).x
        var moveY = that._calculateXY(e).y
        var width = moveX - startX
        var height = moveY - startY
        $("#"+canvasId).addLayer({
            type: 'rectangle',
            ...
            name:layerName,
            fromCenter: false,
            x: startX,
            y: startY,
            width: width,
            height: height
        })
        $("#"+canvasId).drawLayers(); //draw
    }
    })

var canvasResult = document.getElementById('canvasResult')
              var ctx = canvasResult.getContext("2d");
              ctx.drawImage(copyDomCanvas, moveX - startX > 0 ? startX : moveX, moveY - startY > 0 ? startY : moveY, width, height, 0, 0, width, height )
              var dataURL = canvasResult.toDataURL("image/png");

function downloadFile(el, fileName, href){
      el.attr({
        'download':fileName,
        'href': href
      })
  }
  ...
downloadFile($('.ok'), 'screenShot' + Math.random().toString().split('.') [1] || Math.random() + '.png', dataURL)
// Pass in the key object, the image to save the random name, and the base64-encoded image

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jcanvas/16.7.3/jcanvas.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>

screenShot([16, 65], 27) // start shortcut is set to shift+a; exit key is ESC