react canvas拼接图片(纵向)

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

react canvas拼接图片(纵向)相关推荐

vue canvas拼接图片(纵向)
vue 图片竖向拼接组件代码底部有demo <template><div><div><inputtype="file"id=" ...
canvas拼接图片
参考地址 canvas拼接图片效果横向拼接纵向拼接代码 html <!DOCTYPE html> <html lang="en"> <head ...
js使用canvas拼接图片
人狠话不多,先看看图,是不是你需要的效果(文章最后有最终效果),样子有点点那个啥,将就着看一下就是了(图片来自网络): 测试代码如下 <!doctype html> <html la ...
android图片拼,Android 拼接图片
我只实现是纵向拼接,当然要实现各种各样的拼接道理都是一样的. 需要注意的是,图片路径中,最后一个字符是"#"的表示该图片需要进行顺时针90°的翻转,用于纠正手机竖着拍照时照片方向不 ...
android h5 多图上传源码,JS移动端/H5同时选择多张图片上传并使用canvas压缩图片...
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...
React + Canvas 像素风格取色器
前言有时候我们需要通过图片去获得具体像素的颜色.而强大的 Canvas 为我们提供了现成的接口. 这个功能其实并不难,只不过我们需要正确的理解 Canvas 并学会利用它的 API . 如果你急于看 ...
React Canvas：高性能渲染 React 组
React Canvas 提供了使用 Canvas 渲染移动 Web App 界面的能力,替代传统的 DOM 渲染,具有更接近 Native App 的使用体验.React Canvas 提供了一组标 ...
神奇的canvas——巧用 canvas 为图片添加水印
代码地址如下: http://www.demodashi.com/demo/11637.html 很久之前写过一篇关于 canvas 的文章,是通过 canvas 来实现一个绚丽的动画效果,不管看过没 ...
react+antd实现图片上传并且剪裁（请参照最新文章，此案例有bug）
代码详情 (存在的bug:只有第一次上传剪裁是正确的,在不刷新页面的情况下再次进行剪裁会出现错误,目前没有找到解决办法.) 解决办法:点击上传按钮完成上传之后,按钮变为不能点击的状态,阻止bug的发生 ...

react canvas拼接图片(纵向)

react 拼接图片代码

react canvas拼接图片(纵向)相关推荐

最新文章

热门文章