jquery 截图

使用html2canvas库进行截图

html2canvas是一个流行的JavaScript库，可以将HTML元素渲染为Canvas，进而转换为图片。配合jQuery使用非常方便。

安装html2canvas：

npm install html2canvas

基本用法：

$('#capture-btn').click(function() {
  html2canvas(document.querySelector("#capture-area")).then(canvas => {
    document.body.appendChild(canvas)
    // 或者转换为图片
    const imgData = canvas.toDataURL('image/png')
    const img = document.createElement('img')
    img.src = imgData
    document.body.appendChild(img)
  });
});

保存截图为文件

可以将Canvas生成的图片数据保存为文件：

$('#save-btn').click(function() {
  html2canvas(document.querySelector("#target")).then(canvas => {
    const link = document.createElement('a')
    link.download = 'screenshot.png'
    link.href = canvas.toDataURL()
    link.click()
  });
});

处理截图常见问题

截图模糊问题可以通过设置scale参数解决：

html2canvas(element, {
  scale: 2 // 提高分辨率
}).then(canvas => {
  // 处理canvas
});

跨域资源问题需要配置allowTaint或useCORS：

html2canvas(element, {
  allowTaint: true,
  useCORS: true
});

结合jQuery实现区域选择截图

以下示例实现选择页面区域后截图：

let startX, startY, isDrawing = false

$(document).mousedown(function(e) {
  startX = e.pageX
  startY = e.pageY
  isDrawing = true
  $('#selection-box').css({
    left: startX,
    top: startY,
    width: 0,
    height: 0
  }).show()
})

$(document).mousemove(function(e) {
  if (!isDrawing) return
  $('#selection-box').css({
    width: Math.abs(e.pageX - startX),
    height: Math.abs(e.pageY - startY),
    left: e.pageX > startX ? startX : e.pageX,
    top: e.pageY > startY ? startY : e.pageY
  })
})

$(document).mouseup(function() {
  isDrawing = false
  const box = $('#selection-box')[0].getBoundingClientRect()
  html2canvas(document.body, {
    x: box.left,
    y: box.top,
    width: box.width,
    height: box.height
  }).then(canvas => {
    // 处理截图
    $('#selection-box').hide()
  })
})

服务器端保存截图

通过AJAX将截图发送到服务器：

$('#upload-btn').click(function() {
  html2canvas(document.querySelector("#content")).then(canvas => {
    canvas.toBlob(function(blob) {
      const formData = new FormData()
      formData.append('screenshot', blob, 'screenshot.png')

      $.ajax({
        url: '/upload-screenshot',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
          console.log('Upload successful')
        }
      })
    }, 'image/png')
  })
})