压缩图片

1. 用fileReader.readAsDataURL读取file文件,得到的结果为base64位imgUrl
2. 用canvas.drawImage，重绘图片
3. canvasurl 转file后，上传

// 前端用canvas重绘压缩图片 compressImg.js
const dataURLtoFile = (dataurl, filename) => {
  const arr = dataurl.split(",");
  // 将base64编码转为字符串
  const bstr = window.atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, {
    type: "image/jpeg",
  });
};

const compressImg = (file, uploadImage) => {
  // 用canvas重绘压缩图片
  var fileReader = new FileReader();
  if (file == undefined) return;
  // 读取file文件,得到的结果为base64位
  fileReader.readAsDataURL(file);
  fileReader.onload = function () {
    // 读取到的base64
    var imgBase64Data = this.result;
    let img = new Image();
    img.src = imgBase64Data;
    img.onload = () => {
      let width = img.width;
      let height = img.height;
      let canvas = document.createElement("canvas");
      // 重绘图片，固定宽度375*8，等比例缩放图片
      canvas.width = 3000;
      canvas.height = parseInt(3000 / (width / height));
      let context = canvas.getContext("2d");
      context.drawImage(img, 0, 0, canvas.width, canvas.height);
      const canvasSrc = canvas.toDataURL("image/jpeg");
      const canvasSrcFile = dataURLtoFile(canvasSrc, file.name);
      uploadImage(canvasSrcFile);
    };
  };
};

export default compressImg;


// 引用
  import compressImg from "./compressImg";

  const uploadImg = () => {...}
  
  const handleAddCompressImg = (file) => {
    const { size } = file;
    // 图片小于2M，直接上传
    if (size < 2 * 1024 * 1024) {
      uploadImage(file);
    } else {
      compressImg(file, uploadImage);
    }
  };

文字转图片

1. 获取html，dom
2. install html2canvas
3. canvas.toDataURL 转成图片

import html2canvas from 'html2canvas';

const domHtml = document.createElement("div");
domHtml.innerHTML = "this is word"

html2canvas(domHtml).then((canvas) => {
    const canvasSrc = canvas.toDataURL();
    ...
});