html2canvas使用方法，js截圖，壓縮，上傳

npm install html2canvas
           

import html2canvas from 'html2canvas';
           

1.插件截圖生成canvas，轉成blob，再轉成file檔案流

html2canvas($("#app")[0]).then(function(canvas) {
  canvas.toBlob((blobObj)=>{
    let file = new window.File([blobObj], 'capture.jpg', {type: 'image/jpeg'});
    let formData = new FormData();
    formData.append("file",file);
    $.ajax({
      type: 'post',
      url: 'xxxxx',
      data: formData,
      contentType:false,
      processData:false,
      success: function (data) {
        console.info(data);
      },
      error: function (data) {
        console.info(data);
      }
    });
  });
});
           

2.插件截圖生成canvas，先轉成base64壓縮，再轉成blob，再轉成file檔案流

html2canvas($("#app")[0]).then(function(canvas) {
  var dataURL =canvas.toDataURL('image/jpeg',0.5);  //0.5是圖檔品質
  var arr = dataURL.split(','),
  mime = arr[0].match(/:(.*?);/)[1],
  bstr = atob(arr[1]),
  n = bstr.length,
  u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  let blob=new Blob([u8arr], { type: mime });
  let file = new window.File([blob], 'thumbnail.jpg', {type: 'image/jpeg'});
  let formData = new FormData();
  formData.append("file",file);
  $.ajax({
    type: 'post',
    url: 'xxxx',
    data: formData,
    contentType:false,
    processData:false,
    success: function (data) {
      console.info(data);
    },
    error: function (data) {
      console.info(data);
    }
  });
});
           

3.封裝成函數，調用後用.then(file=>{Todo...})接收

/**
   * @name:利用html2canvas插件把DOM節點截圖成為圖檔
   * @param {DOM} DOM 需要截圖的DOM節點 document.getElementById('box');
   * @param {string} fileName 生成截圖的名稱 例如：'thumbnail.jpg'
   * @param {number} ratio 圖檔壓縮率（0.1-1）
   */
  myHtml2canvas(DOM,fileName,ratio){
    return new Promise((resolve)=>{
      html2canvas(DOM).then(function (canvas) {
        var dataURL = canvas.toDataURL('image/jpeg',ratio);
        var arr = dataURL.split(','),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),
          n = bstr.length,
          u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        let blob = new Blob([u8arr], { type: mime });
        let file = new window.File([blob], fileName, {
          type: 'image/jpeg',
        });
        resolve(file);
      });
    })
  }
  //使用
  myHtml2canvas($('#componentContainer')[0],'thumbnail.jpg',0.5).then((file)=>{
    console.log(file);
  })