参考地址

canvas拼接图片

效果

横向拼接

纵向拼接

代码

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><script type="text/javascript" src="test.js"></script>
</head>
<body>
</body>
</html>

js

$(function(){debuggerconst urlList = ['./img/1.jpg','./img/2.jpg','./img/3.jpg']// mergeImgsRow(urlList).then(base64 => {//   const imgDom = document.createElement('img')//   imgDom.src = base64//   document.body.appendChild(imgDom)// })mergeImgsColumn(urlList).then(base64 => {const imgDom = document.createElement('img')imgDom.src = base64document.body.appendChild(imgDom)})
})/*** 合并多张图片，返回新的图片* @param {Array} list 图片url数组* @param {Number} cwith 画布宽度 默认500* @param {Number} cheight 画布高度 默认500*/
function mergeImgsColumn(list, cwith = 100, cheight = 100) {debuggerreturn new Promise((resolve, reject) => {const baseList = []// 创建 canvas 节点并初始化const canvas = document.createElement('canvas')canvas.width = cwithcanvas.height = cheight * list.lengthconst context = canvas.getContext('2d')list.map((item, index) => {const img = new Image()img.src = item// 跨域img.crossOrigin = 'Anonymous'img.onload = () => {context.drawImage(img, 0, cheight * index, cwith, cheight)const base64 = canvas.toDataURL('image/png')baseList.push(base64)if (baseList[list.length - 1]) {console.log(baseList)// 返回新的图片resolve(baseList[list.length - 1])}}})})
}/*** 合并多张图片，返回新的图片* @param {Array} list 图片url数组* @param {Number} cwith 画布宽度 默认500* @param {Number} cheight 画布高度 默认500*/
function mergeImgsRow(list, cwith = 100, cheight = 100) {debuggerreturn new Promise((resolve, reject) => {const baseList = []// 创建 canvas 节点并初始化const canvas = document.createElement('canvas')canvas.width = cwith * list.lengthcanvas.height = cheightconst context = canvas.getContext('2d')list.map((item, index) => {const img = new Image()img.src = item// 跨域img.crossOrigin = 'Anonymous'img.onload = () => {context.drawImage(img, cwith * index, 0, cwith, cheight)const base64 = canvas.toDataURL('image/png')baseList.push(base64)if (baseList[list.length - 1]) {console.log(baseList)// 返回新的图片resolve(baseList[list.length - 1])}}})})
}

图片下载地址

https://c.cidianwang.com/file/shufa/xingshu/a/2021108162951c2d38.jpg

https://c.cidianwang.com/file/shufa/xingshu/zhaomengfu/20197251657326f9ae.jpg

https://c.cidianwang.com/file/shufa/xingshu/a/20211081156390fdd4.jpg

http://fabricjs.com/ (这个也蛮好玩的)

canvas拼接图片相关推荐

vue canvas拼接图片(纵向)
vue 图片竖向拼接组件代码底部有demo <template><div><div><inputtype="file"id=" ...
js使用canvas拼接图片
人狠话不多,先看看图,是不是你需要的效果(文章最后有最终效果),样子有点点那个啥,将就着看一下就是了(图片来自网络): 测试代码如下 <!doctype html> <html la ...
react canvas拼接图片(纵向)
react 拼接图片代码底部有demo import React from "react"; import "./App.css";function App( ...
android h5 多图上传源码,JS移动端/H5同时选择多张图片上传并使用canvas压缩图片...
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...
android图片拼,Android 拼接图片
我只实现是纵向拼接,当然要实现各种各样的拼接道理都是一样的. 需要注意的是,图片路径中,最后一个字符是"#"的表示该图片需要进行顺时针90°的翻转,用于纠正手机竖着拍照时照片方向不 ...
Python使用OpenCV拼接图片
python, opencv, 图片拼接, 视觉作者:草小诚(wellsmile@foxmail.com) 转载请注原文地址:https://blog.csdn.net/cxcjoker7894/a ...
解决Canvas.toDataURL 图片跨域问题
解决Canvas.toDataURL 图片跨域问题参考文章: (1)解决Canvas.toDataURL 图片跨域问题 (2)https://www.cnblogs.com/ajg016/p/547 ...
html 图片剪裁压缩,HTML5 canvas实现图片拉伸、压缩与裁剪
前言: 我们在网页中经常会用到图片展示,通常情况下会给一个固定的宽高来显示这个图片,然而从服务器端上传的图片大小是不确定的,如果直接按默认填充这个框有时候就会特别丑orz.作为一个完(wai)美(ma ...
canvas合成图片圣诞节新技能戴帽
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

canvas拼接图片

canvas拼接图片

效果

横向拼接

纵向拼接

代码

html

js

图片下载地址

canvas拼接图片相关推荐

最新文章

热门文章