纯原生实现多张图片合成
2024-05-18 01:21:12
大家好，我是吃饱就睡，不知道想干嘛的蔬菜乌鸦。想熟悉一下blob和canvas这些工作开发中不是特别常用东西。
纯原生实现多张图片合成
- 预览
- ⛱️一睹为快
- 思路
- 源码
预览
⛱️一睹为快
思路
- 导入图片，通过blob和FileReader生成img
- 将img全都绘制到canvas中，通过toDataURL，将canvas转成图片
- 通过a标签导出
源码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>blob</title><style>body {background-color: #ededed;margin: 0;padding: 0;}.app {margin: 0 auto;width: 60%;height: 100vh;background-color: #fff;}.container {padding: 10px 0 0;display: flex;flex-direction: column;justify-content: center;align-items: center;}.tool-line {width: 100%;display: flex;justify-content: space-around;align-items: center;margin-bottom: 8px;flex-grow: 1;}.tool-btn {width: 95px;height: 30px;line-height: 30px;outline: none;border: none;background-color: #cfc2e7;text-align: center;border-radius: 5px;}.hidden {display: none;}.show {display: block;}.combinePic {font-size: 14px;}.combinePi:focus {background-color: linear-gradient(#cfc2e7, #a28fc5);}label[for='inputId'] {cursor: pointer;}input {margin: 10px auto;}input[type='file'] {display: none;}input[type='textarea'],.renderHtml {width: 100%;overflow-y: auto;display: flex;flex-direction: column;justify-content: center;align-items: center;}img {width: 145px;object-fit: cover;}.canvasContainer {width: 100%;display: flex;justify-content: center;}</style>
</head><body><div class="app"><div class="container"><div class="tool-line"><label class="tool-btn" for="inputId">上传</label><button class="combinePic tool-btn"> 图片合成</button><button class="exportBtn tool-btn hidden">合成导出</button></div><input type="file" name="" id="inputId" /><!-- <input type="textarea" id="inputText" /> --><div class="renderHtml"></div></div><div class="canvasContainer"></div></div>
</body>
<script>const container = document.querySelector('.container')const inputBtn = document.querySelector('#inputId')const renderHtml = document.querySelector('.renderHtml')const combinePicBtn = document.querySelector('.combinePic')const canvasContainer = document.querySelector('.canvasContainer')const exportBtn = document.querySelector('.exportBtn')var canvas function dealFile(content, fileType) {if (fileType === 'image') {const img = document.createElement('img')img.src = contentconst docFrag = document.createDocumentFragment()docFrag.appendChild(img)renderHtml.appendChild(docFrag)} else if (fileType === 'text') {renderHtml.innerText = content}}inputBtn.addEventListener('change', function (e) {const files = e.target.filesconst fileReader = new FileReader()const fileType = files[0].type.split('/')[0]if (fileType === 'image') {fileReader.readAsDataURL(files[0])} else if (fileType === 'text') {fileReader.readAsText(files[0], 'utf-8')}fileReader.onload = function () {var result = fileReader.resultdealFile(result, fileType)}})combinePicBtn.addEventListener('click', function(e) {e.preventDefault()const imgList = getImageList()if (imgList.length === 0) {alert(`请先上传图片`)}else {generateImg()}})exportBtn.addEventListener('click', function(e) {e.preventDefault()const base64Img = canvas.toDataURL('image/jpeg')// console.log(base64Img)const dom = document.createElement('a')dom.href = base64Imgdom.setAttribute('download', new Date().getTime() + '.jpeg')document.body.appendChild(dom)dom.click()URL.revokeObjectURL(base64Img)document.body.removeChild(dom)})function getImageList() {const imgList = renderHtml.querySelectorAll('img')return imgList}function generateImg (width = 420, height=1000) {const imgList = getImageList()canvas = document.createElement('canvas')let cheight = 250canvas.width = container.getBoundingClientRect().width - 30canvas.height = imgList.length * cheight + 10const ctx = canvas.getContext('2d')imgList.forEach((img, index) => {ctx.drawImage(img, 0, cheight * index, canvas.width, cheight)})canvasContainer.appendChild(canvas)exportBtn.classList.add('show')}</script></html>
纯原生实现多张图片合成相关推荐
- java多张图片合成一张_OLIS 多张图片合成分享
OLIS(Create Long Image Synthesis) 最近公司需求 处理多张图片合成并且加底部 合成 实现原理 读取本地绝对路径图片-> 转换成bitmap -> 然后绘制到 ...
- 用ffmpeg把gif动图分离成多张图片和ffmpeg多张图片合成gif动图
用ffmpeg把gif动图分离成多张图片和ffmpeg多张图片合成gif动图(20190214) 文章目录: 一.ffmpeg把gif动图分离成多张图片 二.ffmpeg多张图片合成gif动图 三.把 ...
- 纯原生组件化-模块化的探索
纯原生的组件化.模块化的一次小小的尝试,用到了如下几个新特性: shadown-DOM 对HTML标签结构的一个封装,真正意义上的组件,能保证 shadow-DOM 中的DOM元素不会被外界影响,内部 ...
- H5网页App和纯原生的App差距在哪？
1.动画 动画有很多种,比如侧边栏菜单的滑入滑出.元素的响应动画.页面切换之间的过场等等,在H5之下的众多实现方法都没有办法达到纯原生的性能.一般这些的话有几种不同的选择:css3动画.javasc ...
- react 原生html 插件,纯原生JS的瀑布流插件Macy.js，前端必备插件
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 所以,选择一款简单易用的瀑布流js插件,可以让前端工程师快速开发出漂 ...
- php 图片合成,PHP中多张图片合成一张图片例子
今天分享一段PHP中多张图片合成一张图片的代码实现,我们可以在图片合成,水印,九宫格等需求下使用到类似这样的图片合成效果,下面一起来看看例子吧. 今天分享一段PHP中多张图片合成一张图片的代码实现,我 ...
- matlab两张图片合成一张_两张图片合成一幅画意作品的简单方法
在<教你制作一幅画意摄影作品>的文章中,介绍了Snapseed(指划修图)和ToolWiz Photos(理理相册)两个App中用手机或平板制作画意摄影作品的基本方法,现在再来进一步试试用 ...
- android gif转jpg格式文件,android使用多张图片合成gif文件
之前有遇到过一个要用多张图片合成gif图的场景,当时是搜索了好久,也没有发现有相关的使用记录.后来找到了实现方式,特此记录. 使用了Github上该project:android-gif-encode ...
- html5多图合成gif,gif动态图片制作 多张图片合成gif动态图片
单一的静态图片太枯燥,GIF动态图片看起来才有意思有木有!网上各种经典爆笑GIF图片或者闪图,大多数的友友们只会看→复制→外发,难道就没有朋友想要自己制作GIF动态图片吗?如何制作gif动态图片?狸窝 ...
最新文章
- Matlab与线性代数 -- 线性间隔向量
- 关于Mongodb索引创建的一些体会
- android电视视频app下载,央视频APP智能电视版下载-央视频电视版客户端 1.9.0.53139 安卓版-玩友游戏网...
- 3.6 迁移故障恢复
- Windows 7/8.1 仍可免费升级至 Windows 10
- 谷歌宣布确立“量子霸权” IBM质疑：真的吗？
- Linux三大主流网站构建平台,Linux快速构建LAMP网站平台
- 大数据视觉智能实践及医学影像智能诊断探索（讲座精华笔记）
- swift2.2的新特性
- linux 中文ssid 显示,无法连接中文 SSID 的 Wi-Fi？简单几步就搞定！
- poj Labeling Balls 3687 拓扑排序！！！！
- 2.2 Java内存介绍-运行时数据区
- 区块链 solidity 零知识证明DApp开发实践【身份证明/以太坊】
- Gartner：市场对5G判断有三点误区，2022年前不会有大规模5G商用案例
- java下载zip文件
- (转)中国大学改名大全2007最新版(笑掉大牙)
- 信息学奥赛一本通1368 对称二叉树
- 东方联盟郭盛华获100亿战略入股，到底谁支持他？网友：不敢猜
- 努比亚 Z5 mini刷机包 omni4.4.2修改V4.0 自用版 精简 MIUI特效
- 基本数学逻辑学符号（数学知识用程序表达轻松学系列）