react 拼接图片代码

底部有demo

import React from "react";
import "./App.css";function App() {return (<><div><inputtype="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