瀏覽器端用JS實現建立和下載圖片

問題場景

在前端不少的項目中，文件下載的需求很常見。尤爲是經過JS生成文件內容，而後經過瀏覽器端執行下載的操做。如圖片，Execl 等的導出功能。日前，項目中就遇到了這類需求，在瀏覽器端實現保存當前網頁爲圖片，而後還能夠下載。

解決方案

網頁生成圖片

這裏能夠採用 html2canvas 來實現。而且能夠兼容大部分主流的瀏覽器。

• Firefox 3.5+
• Google Chrome
• Opera 12+
• IE9+
• Safari 6+

文件下載

第一種方案

HTML5 新增了 download 屬性，只要給 download 加上想要導出的文件名便可。如 download="file.jpg"。想要詳細的瞭解此屬性，能夠參考 張鑫旭 寫的一篇博文，傳送門。

簡單代碼實現以下：

import html2canvas from 'html2canvas';

// 生成圖片，並自動下載
function captureScreenshot() {
  const preview = document.querySelector('.preview-graphs');
  html2canvas(preview).then((canvas) => {
      var img = document.createElement('a');
      img.href = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
      // 下載的文件名字
      img.download = `file.jpg`;
      img.click();
    })  
}

Note:上述實現，目前只有 Google Chrome 功能是正常的。兼容性存在很大的問題。

第二種方案

這裏能夠採用 FileSaver.js。需以 Blob 的形式來進行保存。canvas 提供了一種建立 Blob 對象的方法 canvas.toBlob((blob) => {}) ，可是兼容性堪憂，絕大部分瀏覽器都沒有實現。所以官網特地提供了這樣的一個庫，canvas-toBlob.js。

FileSaver.js is the solution to saving files on the client-side, and is perfect for web apps that generates files on the client, However if the file is coming from the server we recommend you to first try to use Content-Disposition attachment response header as it has more cross-browser compatible. - 摘自官網

FileSaver.js 是在客戶端保存文件的解決方案，很是適合在客戶端生成文件的Web應用程序，可是若是文件來自服務器，咱們建議您首先嚐試使用 Content-Disposition 附件響應 標題，由於它有更多的跨瀏覽器兼容。

能夠兼容主流的瀏覽器，如 Firefox，Chrome，Edge，IE 10+ 等。

代碼實現以下：

import html2canvas from 'html2canvas';
import FileSaver from 'file-saver';

// 這裏沒有用 canvas-toBlob.js
// base64 轉換成 Blob
function dataURLToBlob(dataURL) {
  var BASE64_MARKER = ';base64,';
  var parts;
  var contentType;
  var raw;

  if (dataURL.indexOf(BASE64_MARKER) === -1) {
    parts = dataURL.split(',');
    contentType = parts[0].split(':')[1];
    raw = decodeURIComponent(parts[1]);

    return new Blob([raw], {type: contentType});
  }

  parts = dataURL.split(BASE64_MARKER);
  contentType = parts[0].split(':')[1];
  raw = window.atob(parts[1]);
  var rawLength = raw.length;
  var uInt8Array = new Uint8Array(rawLength);

  for (var i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }

  return new Blob([uInt8Array], {type: contentType});
}

// 生成圖片，並自動下載
function captureScreenshot() {
  const preview = document.querySelector('.preview-graphs');
  html2canvas(preview).then((canvas) => {
     const fileBlob = dataURLToBlob(canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream'));
     const fileName = `file.jpg`;
     FileSaver.saveAs(fileBlob, fileName);
  });  
}

相關連接

• Blob
• HTMLCanvasElement.toBlob()
• HTMLCanvasElement.toDataURL()