浏览器端用JS实现创建和下载图片

blair 发布于2019-08-23 14:47 / 751人阅读

摘要：尤其是通过生成文件内容，然后通过浏览器端执行下载的操作。日前，项目中就遇到了这类需求，在浏览器端实现保存当前网页为图片，然后还可以下载。提供了一种创建对象的方法，但是兼容性堪忧，绝大部分浏览器都没有实现。

问题场景

在前端很多的项目中，文件下载的需求很常见。尤其是通过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()

云服务器 GPU云服务器创建上传和下载服务器 js实现浏览器全屏 js实现视频下载 js实现图片按键查看

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101133.html

前端实现图片下载

摘要：测试说明位位位位服务端实现下载通过修改响应头，告诉浏览器这个请求回来的是个附件。控制用户请求所得的内容存为一个文件的时候提供一个默认的文件名，文件直接在浏览器上显示或者在访问时弹出文件下载对话框。测试说明 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实现图片压缩上传

摘要：一需求的场景在我们的需求中需要有一个在手机浏览器端，用户实现上传证件照片的功能，我们第一版上了一个最简版，直接让用户在本地选择图片，然后上传到公司公共的服务器上。一、需求的场景：在我们的需求中需要有一个在手机浏览器端，用户实现上传证件照片的功能，我们第一版上了一个最简版，直接让用户在本地选择图片，然后上传到公司公共的服务器上。功能实现后我们发现一个问题，公司公共的服务器有2M...

snowLu 2019-08-01 18:18 评论0 收藏0
在浏览器端用H5实现图片压缩上传

摘要：一需求的场景在我们的需求中需要有一个在手机浏览器端，用户实现上传证件照片的功能，我们第一版上了一个最简版，直接让用户在本地选择图片，然后上传到公司公共的服务器上。一、需求的场景：在我们的需求中需要有一个在手机浏览器端，用户实现上传证件照片的功能，我们第一版上了一个最简版，直接让用户在本地选择图片，然后上传到公司公共的服务器上。功能实现后我们发现一个问题，公司公共的服务器有2M...

Flink_China 2019-08-21 18:26 评论0 收藏0
使用JavaScript将当前页面保存成PDF，支持图片和文字的保存

摘要：前端开发的朋友们可能会遇到这个需求将您负责开发的网页的全部内容，包括文字和图片，一起保存成一个文件。在您的前端页面里画一个按钮，用于触发将当前网页保存成文件的事件。前端开发的朋友们可能会遇到这个需求：将您负责开发的网页的全部内容，包括文字和图片，一起保存成一个PDF文件。如果采用屏幕截图的话，默认Windows操作系统的截图按钮无法完整截取超过一屏幕的屏幕内容。我在网上找了一段时间...

animabear 2019-08-23 12:32 评论0 收藏0