多图上传+水印- 移动端和pc端均可用,js实现

需求:1.采集图片(需限制张数,大小,像素)
           2.添加时间水印

解决方案:1.图片上传采用input标签type=“file”

                 2.水印使用canvas来绘制;

经过一翻开发测试,成功封装成为一个小插件,使用方式easy,easy,easy如下

1.准备一个盒子

<div class="selectPhotos"></div>

 2.初始化,over,over,over,是的就这样简单

new PhotosUpload(".selectPhotos", function(e) {
				this.init({			
					callback: function(imgDatas) {
						console.log(imgDatas)
					}
				});
			});
参数说明
maxNumnumber最大图片数量(默认值:9)
maxWidthnumber像素限制宽度(默认值:10000)
maxHeightnumber像素限制高度(默认值:10000)
maxSizenumber最大尺寸(默认值:10M)
dateWaterMarkboolean是否显示时间水印(默认值:false),格式为:年-月-日 时:分
onlyCameraboolean仅拍照上传,不许选择图片(默认值:false)

代码下载路径:

图片上传及预览+时间水印-Javascript文档类资源-CSDN下载

扫码关注公众号,更多实践分享:
 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

浪子快跑

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值