用户体验

页面生成图片与二维码

在工作中有需要将页面生成图片或者二维码的需求。可能我们第一想到的，交给后端来生成更简单。但是这样我们需要把页面代码全部传给后端，网络性能消耗太大。使用 QRCode 生成二维码

import QRCode from "qrcode";
// 使用 async 生成图片
const options = {};
const url = window.location.href;
async (url) => {
  try {
    console.log(await QRCode.toDataURL(url, options));
  } catch (err) {
    console.error(err);
  }
};

将 await QRCode.toDataURL(url, options) 赋值给图片 url 即可；对于生成图片主要是使用 htmlToCanvas 生成 canvas 画布

import html2canvas from "html2canvas";

html2canvas(document.body).then(function (canvas) {
  document.body.appendChild(canvas);
});

但是不单单在此处就完了，由于是 canvas 的原因。移动端生成出来的图片比较模糊。我们使用一个新的 canvas 方法多倍生成，放入一倍容器里面，达到更加清晰的效果，通过超链接下载图片：

const scaleSize = 2;
const newCanvas = document.createElement("canvas");
const target = document.querySelector('div');
const width = parseInt(window.getComputedStyle(target).width);
const height = parseInt(window.getComputedStyle(target).height);
newCanvas.width = width * scaleSize;
newCanvas.height = widthh * scaleSize;
newCanvas.style.width = width + "px";
newCanvas.style.height =width + "px";
const context = newCanvas.getContext("2d");
context.scale(scaleSize, scaleSize);
html2canvas(document.querySelector('.demo'), { canvas: newCanvas }).then(function(canvas) {
  // 简单的通过超链接设置下载功能
  document.querySelector(".btn").setAttribute('href', canvas.toDataURL());
}

最近更新于 0001-01-01