캔버스 기반 HTML 스크린샷 소개

이 글은 캔버스를 기반으로 HTML로 구현한 작은 스크린샷 데모를 주로 소개하는데, 관심이 있으신 분은 자세히 알아보세요

상단에 작성하세요. #🎜🎜 #

• 설정 시작 / 단축키 종료

• 시작한 후 DOM을 캔버스에 그려 원래 DOM 인터페이스를 덮습니다

• Add 하나의 캔버스는 마우스 스크린샷 영역을 시뮬레이션합니다

• 캔버스를 추가하여 마우스 스크린샷 영역에 해당하는 브라우저 인터페이스를 그립니다(첫 번째 캔버스에서 캡처)

  # 🎜🎜#

스크린샷 저장 🎜#
• 단축키로 인해 발생할 수 있는 충돌로 인해 시작 단축키가 단축키 수를 제한할 수 없기를 바랍니다. 따라서 첫 번째 매개변수는 배열 형태로 전달됩니다.

  function screenShot(quickStartKey, EndKey) {
    //兼容性考虑不使用...扩展字符串
    var keyLength = quickStartKey.length
    var isKeyTrigger = {}
    var cantStartShot = false
    ...
    quickStartKey.forEach(function(item) { //遍历参数数组
      isKeyTrigger[item] = false //默认数组中所有键都没有触发
    })
    $('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 //查看有没有需要触发的快捷键
        })
        if(notTrigger.length === 0) { //没有需要触发的快捷键即可以开始截图
          cantStartShot = true
          beginShot(cantStartShot)
        }
      }
    })

  로그인 후 복사

2 원래 DOM 인터페이스를 덮기 위해 DOM을 캔버스에 그립니다.

기본 방법을 사용하는 경우 MDN을 참조할 수 있습니다. 캔버스에 대한 지침은 에서 DOM을 그리는 방법을 소개합니다. 가장 까다로운 부분은 요소와 관련된 XML이 포함된 SVG 이미지를 생성해야 한다는 것입니다. 현재 브라우저에 표시된 DOM을 계산하고 추출하는 방법이 실제로 가장 번거롭습니다. 좋아요, 실제로 작성자는 =를 수동으로 구현하는 좋은 아이디어가 없습니다. =이므로 이를 달성하기 위해 이 html2canvas 라이브러리를 선택했습니다. 일반적인 호출 방법은 다음과 같습니다:

function beginShot(cantStartShot) {
    if(cantStartShot) {
        html2canvas(document.body, {
            onrendered: function(canvas) {
                //得到与界面一致的canvas图像
            }
        })
    }
}

3. 캔버스 시뮬레이션 마우스 스크린샷 영역 추가

이 장소의 구현은 원래 의도되었습니다. 하지만 관련된 한 가지 문제는 마우스를 누르고 드래그를 시작한 후 캔버스를 실시간으로 그려야 한다는 것입니다. 이는 마우스 이동이 이루어질 때마다 현재와 유사한 개념으로 이어집니다. 스크린샷 프레임이 그려지지만 다음에 mousemove가 실행되면 이전 스크린샷 상자가 삭제됩니다. 이는 실시간 그리기 프로세스를 시뮬레이션하는 데 사용됩니다. 아쉽게도 작성자가 캔버스 네이티브 API를 사용할 수 있는 방법을 찾지 못했습니다. 있다면 그려진 그림에 표시하는 방법을 알려주세요. 여기서 저자는 Jcanvas라는 Jq 기반 캔버스 라이브러리를 사용하는데, 이는 레이어의 개념을 제공합니다. 즉, 레이어 하나에 그림 하나만 그릴 수 있고 레이어에 이름을 표시할 수 있습니다. 이는 작성자의 요구 사항을 충족하며 다음과 같이 구현됩니다.

$('#' + canvasId).mousedown(function(e) {
    $("#"+canvasId).removeLayer(layerName) //删除上一图层
    layerName += 1
    startX = that._calculateXY(e).x //计算鼠标位置
    startY = that._calculateXY(e).y
    isShot = true
    $("#"+canvasId).addLayer({
        type: 'rectangle', //矩形
        ...
        name:layerName, //图层名称
        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(); //绘制
    }
    })

4. 캔버스를 추가하여 마우스 스크린샷 영역에 해당하는 브라우저 인터페이스를 그립니다.

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)
// 传入按键对象、图像保存随机名、base64编码的图像

배포

종속성

<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) // 开始快捷键设置为shift+a；退出键为ESC

글에서 가장 역겨운 부분(DOM을 캔버스에 쓰기, 캔버스 설정 레이어)을 각각 채택했습니다. 이를 구현하기 위해 두 개의 라이브러리가 사용됩니다. 개인적으로 직접 작성하는 것은 아직 조금 어렵다고 생각하지만, 이러한 작업을 구현하기 위해 네이티브 API를 사용하는 방법에 대해 저자는 계속해서 주의를 기울일 것입니다. .

관련 권장 사항:

전자 복권 스크래치 오프를 시뮬레이션하기 위한 캔버스 코드

# 🎜🎜 #HTML5 Canvas를 사용하여 그림자 효과를 그리는 방법

위 내용은 캔버스 기반 HTML 스크린샷 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!