博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
利用canvas合并图片
阅读量:6475 次
发布时间:2019-06-23

本文共 855 字,大约阅读时间需要 2 分钟。

  hot3.png

function merger(imgs,maxWidth){	if(!imgs) 		return null;		maxWidth = maxWidth || 500;		var height = 0;	for (var i = 0; i < imgs.length; i++) {		var img = imgs[i];		if (img.width > maxWidth) {			height += img.height * (maxWidth / img.width);			continue;		}		height += img.height;	}		var canvas = document.createElement("canvas");	canvas.width = maxWidth+10;	canvas.height = height+10;	var ctx = canvas.getContext("2d");		var dheight = 10;	for (var i = 0; i < imgs.length; i++) {		var img = imgs[i];		var cheight = img.height;		var cwidth = img.width;		if (cwidth > maxWidth) {			cwidth = maxWidth;			cheight = img.height * (maxWidth / img.width);		}				ctx.drawImage(img, 10, dheight, cwidth, cheight);		dheight += cheight;	}			var dataurl = canvas.toDataURL('image/png');	return dataurl;}

只能在支持html5的浏览器查看哦....

转载于:https://my.oschina.net/btboys/blog/41665

你可能感兴趣的文章
AndroidNote
查看>>
中金易云:为出版社找到下一本《解忧杂货店》
查看>>
Flex布局
查看>>
Material Design之 AppbarLayout 开发实践总结
查看>>
Flutter之MaterialApp使用详解
查看>>
DataBinding最全使用说明
查看>>
原生Js交互之DSBridge
查看>>
Matlab编程之——卷积神经网络CNN代码解析
查看>>
白洋淀周末游
查看>>
三篇文章了解 TiDB 技术内幕 —— 说计算
查看>>
copy strong weak assign的区别
查看>>
OpenCV 入门
查看>>
css 3D transform变换
查看>>
ele表格合并行之后的selection选中
查看>>
正则表达式分解剖析(一文悟透正则表达式)
查看>>
解决UILable标点符号居中的问题
查看>>
HTML5新特性教程
查看>>
SpringBoot 实战 (十七) | 整合 WebSocket 实现聊天室
查看>>
ImageOptim-无损图片压缩Mac版
查看>>
12 Go语言map底层浅析
查看>>