JS 캡 처

1. DOM 노드 설정 위치: position: absolute 또는 position: fixed, 노드 가 문서 흐름 에 없 으 면 캡 처 위 에 공백 이 생 길 수 있 습 니 다. 일부 Android 기기 에서 우연히 나타 나 면 다음 과 같은 방법 으로 해결 할 수 있 습 니 다. 이 노드 를 복사 하고 설정 할 수 있 습 니 다. position: relative, 이 노드 를 body 에 마 운 트 하고 캡 처 완료 후 이 노드 를 제거 합 니 다.

function getCloneDom (dom) {
  // Create clone of element
  let cloneDom = dom.cloneNode(true);

  // Position element relatively within the
  // body but still out of the viewport
  let style = cloneDom.style;
  style.position = 'relative';
  style.top = window.innerHeight + 'px';
  style.left = 0;

  // Append clone to body and return the clone
  document.body.appendChild(cloneDom);
  return cloneDom;
}

2, 캡 처 과정, 우선 설치 의존 html 2 canvas

function screenShot (dom) {
  let width = dom.clientWidth;
  let height = dom.clientHeight;
  let canvas = document.createElement('canvas');
  let ctx = canvas.getContext('2d');
  let scale = getPixelRatio(ctx) * 2;

  canvas.width = width * scale;
  canvas.height = height * scale;
  ctx.scale(scale, scale);
  canvas.style.width = width + 'px';
  canvas.style.height = height + 'px';

  let opts = {
    scale: scale,
    canvas: canvas,
    width: width,
    height: height,
    useCORS: true,
    logging: false
  };

  return html2canvas(dom, opts).then(canvas => {
    let context = canvas.getContext('2d');
    //      
    context.mozImageSmoothingEnabled = false;
    context.webkitImageSmoothingEnabled = false;
    context.msImageSmoothingEnabled = false;
    context.imageSmoothingEnabled = false;
    return Promise.resolve(canvas);
  });
}

function getPixelRatio (context) {
  let backingStore = context.backingStorePixelRatio ||
    context.webkitBackingStorePixelRatio ||
    context.mozBackingStorePixelRatio ||
    context.msBackingStorePixelRatio ||
    context.oBackingStorePixelRatio ||
    context.backingStorePixelRatio || 1;
  return (window.devicePixelRatio || 1) / backingStore;
}

3. 방법 호출

async function doScreenShot {
    const cloneDom = getCloneDom(dom);
    const canvas = await screenShot(cloneDom);
    document.body.removeChild(cloneDom);
}

4. 저 버 전 브 라 우 저 호 환

if (!HTMLCanvasElement.prototype.toBlob) {
  Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
    value: function (callback, type, quality) {
      const binStr = atob(this.toDataURL(type, quality).split(',')[1]);
      const len = binStr.length;
      const arr = new Uint8Array(len);

      for (var i = 0; i < len; i++) {
        arr[i] = binStr.charCodeAt(i);
      }
      callback(new Blob([arr], {type: type || 'image/png'}));
    }
  });
}