js基于canvas制作图片压缩预览保存打压缩包功能

来源:https://www.sucaihuo.com/js/4673.html 2019-08-23 11:28浏览(127) 收藏

js基于canvas制作图片压缩预览保存打压缩包功能,可设置jpg图片压缩比例和图片最大宽度,支持用jszip打压缩包下载。
js基于canvas制作图片压缩预览保存打压缩包功能
分类:图片代码 > 缩略图 难易:中级
查看演示 下载资源: 7

手机扫码访问:

下载资源 下载积分: 30 积分

js代码

<script type="text/javascript" src="jszip/jszip.min.js"></script>
<script type="text/javascript" src="jszip/FileSaver.js"></script>
<script type="text/javascript" src="js/JCompressor.js"></script>
<script>
			document.getElementById("fileinput").addEventListener("change",inputchange)
			function inputchange(_this){
				var _this = this;
				var quality = document.getElementById("quality").value;
				var maxWidth = document.getElementById("maxwidth").value;
				var loadingDom = document.getElementById("loading");
				JCompressor(_this, {
					Quality: Number(quality),
					MaxWidth: Number(maxWidth),
					PreviewContainer: "imgbox",
					FileLoad: function(filedata) {
						_this.value = "";
					},
					NeedDownload:true,
					DownloadLoad:function(nextfn){
						var btnDom = document.getElementById("downloadBtn");
						btnDom.style.color = "blue";
						btnDom.style.borderColor = "blue";
						btnDom.onclick = function() {
							nextfn();
							btnDom.onclick = null;
							btnDom.style.color = "";
							btnDom.style.borderColor = "";
						}
					},
					ChangeBefore:function(){
						loadingDom.innerHTML = "处理中······";
					},
					ChangeAfter:function(){
						loadingDom.innerHTML = "";
					}
				})
			} 
</script>
标签: 压缩图片压缩
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 3007547952

1 2