瀏覽器端用JS實現(xiàn)創(chuàng)建和下載圖片

blair 發(fā)布于2019-08-23 14:47 / 753人閱讀

摘要：尤其是通過生成文件內容，然后通過瀏覽器端執(zhí)行下載的操作。日前，項目中就遇到了這類需求，在瀏覽器端實現(xiàn)保存當前網頁為圖片，然后還可以下載。提供了一種創(chuàng)建對象的方法，但是兼容性堪憂，絕大部分瀏覽器都沒有實現(xiàn)。

問題場景

在前端很多的項目中，文件下載的需求很常見。尤其是通過JS生成文件內容，然后通過瀏覽器端執(zhí)行下載的操作。如圖片，Execl 等的導出功能。日前，項目中就遇到了這類需求，在瀏覽器端實現(xiàn)保存當前網頁為圖片，然后還可以下載。

解決方案 網頁生成圖片

這里可以采用 html2canvas 來實現(xiàn)。并且可以兼容大部分主流的瀏覽器。

Firefox 3.5+

Google Chrome

Opera 12+

IE9+

Safari 6+

文件下載 第一種方案

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

簡單代碼實現(xiàn)如下：

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:上述實現(xiàn)，目前只有 Google Chrome 功能是正常的。兼容性存在很大的問題。

第二種方案

這里可以采用 FileSaver.js。需以 Blob 的形式來進行保存。canvas 提供了一種創(chuàng)建 Blob 對象的方法 canvas.toBlob((blob) => {}) ，但是兼容性堪憂，絕大部分瀏覽器都沒有實現(xiàn)。因此官網特意提供了這樣的一個庫，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+ 等。

代碼實現(xiàn)如下：

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()

GPU云服務器云服務器創(chuàng)建上傳和下載服務器 js實現(xiàn)瀏覽器全屏 js實現(xiàn)視頻下載 js實現(xiàn)圖片按鍵查看

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101133.html

前端實現(xiàn)圖片下載

摘要：測試說明位位位位服務端實現(xiàn)下載通過修改響應頭，告訴瀏覽器這個請求回來的是個附件。控制用戶請求所得的內容存為一個文件的時候提供一個默認的文件名，文件直接在瀏覽器上顯示或者在訪問時彈出文件下載對話框。測試說明 Chrome 65.0.3325.181 (64 位) Chrome 69.0.3497.92 (64 位) IE 11.0.9600.19002 (64 位) Firefox ...

MingjunYang 2019-08-22 10:54 評論0 收藏0
在瀏覽器端用H5實現(xiàn)圖片壓縮上傳

摘要：一需求的場景在我們的需求中需要有一個在手機瀏覽器端，用戶實現(xiàn)上傳證件照片的功能，我們第一版上了一個最簡版，直接讓用戶在本地選擇圖片，然后上傳到公司公共的服務器上。一、需求的場景：在我們的需求中需要有一個在手機瀏覽器端，用戶實現(xiàn)上傳證件照片的功能，我們第一版上了一個最簡版，直接讓用戶在本地選擇圖片，然后上傳到公司公共的服務器上。功能實現(xiàn)后我們發(fā)現(xiàn)一個問題，公司公共的服務器有2M...

snowLu 2019-08-01 18:18 評論0 收藏0
在瀏覽器端用H5實現(xiàn)圖片壓縮上傳

摘要：一需求的場景在我們的需求中需要有一個在手機瀏覽器端，用戶實現(xiàn)上傳證件照片的功能，我們第一版上了一個最簡版，直接讓用戶在本地選擇圖片，然后上傳到公司公共的服務器上。一、需求的場景：在我們的需求中需要有一個在手機瀏覽器端，用戶實現(xiàn)上傳證件照片的功能，我們第一版上了一個最簡版，直接讓用戶在本地選擇圖片，然后上傳到公司公共的服務器上。功能實現(xiàn)后我們發(fā)現(xiàn)一個問題，公司公共的服務器有2M...

Flink_China 2019-08-21 18:26 評論0 收藏0
使用JavaScript將當前頁面保存成PDF，支持圖片和文字的保存

摘要：前端開發(fā)的朋友們可能會遇到這個需求將您負責開發(fā)的網頁的全部內容，包括文字和圖片，一起保存成一個文件。在您的前端頁面里畫一個按鈕，用于觸發(fā)將當前網頁保存成文件的事件。前端開發(fā)的朋友們可能會遇到這個需求：將您負責開發(fā)的網頁的全部內容，包括文字和圖片，一起保存成一個PDF文件。如果采用屏幕截圖的話，默認Windows操作系統(tǒng)的截圖按鈕無法完整截取超過一屏幕的屏幕內容。我在網上找了一段時間...

animabear 2019-08-23 12:32 評論0 收藏0