JavaScript识别element-upload上传图片中的二维码

坑我都帮你们踩过了 …

• el-upload 上传回调的 onSuccess 的 files 不是文件对象，他只是包含了文件的一些基本信息，解析的话要自己下载

• 图片跨域

• 图片的宽度必须是 4 的倍数

const decodeQRCode = async (imageUrl) => {
  const response = await axios.get(imageUrl, {
    responseType: "arraybuffer",
  });
  const image = new Image();
  image.crossOrigin = "anonymous";
  image.src = imageUrl;
  image.onload = () => {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    canvas.width = image.width;
    canvas.height = image.height;
    ctx.drawImage(image, 0, 0, image.width, image.height);
    const imageData = ctx.getImageData(0, 0, image.width, image.height);
    const data = new Uint8ClampedArray(response.data);
    const newDataLength =
      Math.ceil(data.length / (4 * image.width)) * (4 * image.width);
    const newData = new Uint8ClampedArray(newDataLength);
    newData.set(data);
    imageData.data.set(newData);
    const code = jsQR(imageData.data, imageData.width, imageData.height);
    console.log("QrCode: ", code.data);
  };
};