react canvas拼接图片(纵向)

react 拼接图片代码

底部有demo

import React from "react";
import "./App.css";

function App() {
  return (
    <>
      <div>
        <input
          type="file"
          id="upFile"
          onChange={upFile.bind(this)}
          accept="image/*"
          multiple="multiple"
        />
        <label htmlFor="upFile">
          <span className="choosefile-btn">选择文件</span>
        </label>
      </div>
    </>
  );
}
const returnType = "base64";
const quality = 0.618;
let returnData = null;
const isAutoDownload = true;
const widths = 1366;

let base64ToBlob = (code) => {
  let parts = code.split(";base64,");
  let contentType = parts[0].split(":")[1];
  let raw = window.atob(parts[1]);
  let rawLength = raw.length;
  let uInt8Array = new Uint8Array(rawLength);

  for (let i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }
  return new Blob([uInt8Array], { type: contentType });
};
let downloadFile = (fileName, content) => {
  let aLink = document.createElement("a");
  let blob = base64ToBlob(content); // new Blob([content]);
  let evt = document.createEvent("HTMLEvents");
  evt.initEvent("click", true, true); // initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
  aLink.download = fileName;
  aLink.href = URL.createObjectURL(blob);
  aLink.dispatchEvent(
    new MouseEvent("click", {
      bubbles: true,
      cancelable: true,
      view: window,
    })
  ); // 兼容火狐
};

let upFile = (event) => {
  let file = document.getElementById("upFile").files;
  if (returnType !== "file") {
    const files = Array.from(file);
    filesToInstances(files);
  } else {
    returnData = file;
    this.returnRes();
  }
};
let filesToInstances = (files) => {
  const length = files.length;
  let instances = [];
  let finished = 0;
  files.forEach((file, index) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (e) => {
      const image = new Image();
      image.src = e.target.result;
      image.onload = () => {
        // 图片实例化成功后存起来
        instances[index] = image;
        finished++;
        if (finished === length) {
          drawImages(instances);
        }
      };
    };
  });
};

let drawImages = (images) => {
  const width = widths;
  const heights = images.map((item) => (width / item.width) * item.height);
  const canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = heights.reduce((total, current) => total + current);
  const context = canvas.getContext("2d");

  let y = 0;

  images.forEach((item, index) => {
    const height = heights[index];
    context.drawImage(item, 0, y, width, height);
    y += height;
  });
  const base64Url = canvas.toDataURL("image/jpeg", quality);

  dealImages(base64Url);
  if (returnType === "base64" && isAutoDownload) {
    downloadFile(createFileName(), base64Url);
  }
};

let dealImages = (url) => {
  returnData = url;
  console.log(url);
  // 此处返回图片base64
};

let createFileName = () => {
  return "图片拼接" + new Date().getTime();
};

export default App;

App.css

input{
  display: none;
}

.choosefile-btn{
  display: inline-block;
  padding: 10px 20px;
  margin-top: 40px;
  background: rgb(83, 170, 148);
  border-radius: 8px;
  color: #efeefe;
}

vue拼接图片代码:vue拼接图片代码

angular拼接图片代码:angular拼接图片代码

demo地址(vue):demo