摘要:前天写完文件上传的时候,老板给了个任务,问我能不能把图片压缩后再上传,并且保证前面的功能能正常使用。于是就想能不能做一个在线的图片转换器。目前仅支持当图片较大时,转格式可能失败作者表示他不知道原因。
前天写完文件上传的时候,老板给了个任务,问我能不能把图片压缩后再上传,并且保证前面的功能能正常使用。虽然最后放弃了这个想法,但我在查资料的过程中看到了canvas的toDataURL这个功能。于是就想能不能做一个在线的图片转换器。在经过一天的辛苦耕耘后(我是不会告诉你们我在事件绑定上浪费了半天时间( ´艸`)ムププ),总算弄出个大概了。虽然还有一些东西不太明白,但总体没什么问题了。
主要的几个功能就是:
1.toDataURL(用来压缩转码)
2.通过后台的临时储存来达到跨域获取图片(虽然html5提供了跨域获取图片的方式,但这要你情我愿才行啊(´・ω・`) )
3.js下载图片
有关html5图片跨域可以参考这篇文章:https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
感谢下面的文章提供的学习方向:
http://www.baidufe.com/item/65c055482d26ec59e27e.html
http://blog.csdn.net/chaojie2009/article/details/22047871
演示地址:我是demo
源码地址:点我下载
首先
HTML:
IMGFormat IMGFormat TO请选择image文件: 使用链接时请注意图片是否是外链。目前仅支持:jpg|png|gif|bmp当图片较大时,转png格式可能失败(作者表示他不知道原因Σ(゚д゚lll))。 如果有谁知道的话,欢迎在文章下面的评论留言,谢谢。
CSS:
style.css
/*************reset****************/ html{color:#333;-webkit-text-size-adjust:none;height:100%;max-height:100%;overflow: hidden;font-family: "Microsoft Yahei";} body{height: 100%;max-height:100%;overflow: hidden;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;} address,caption,cite,code,dfn,em,var,optgroup{font-style:inherit;font-weight:inherit;} del,ins{text-decoration:none;} li{list-style:none;} h1,h2,h3,h4,h5,h6{font-size:100%;}q:before,q:after{content:"";} abbr,acronym{border:0;font-variant:normal;} sup{vertical-align:baseline;} sub{vertical-align:baseline;}legend{color:#000;} input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;} body{font-size:12px;} a{color: #333333;text-decoration: none;} a:hover{text-decoration:underline; color:#c00;} /*font*/ *{ font-size: 1.05em; color: #222; font-family: "Microsoft Yahei"; }
format.css
body{ background: -webkit-linear-gradient(#66ccff,#74b1d1); background: -o-linear-gradient(#66ccff,#74b1d1); background: -moz-linear-gradient(#66ccff,#74b1d1); background: -ms-linear-gradient(#66ccff,#74b1d1); background: linear-gradient(#66ccff,#74b1d1); position: relative; } #header{ height: 2.8em; background: -webkit-linear-gradient(rgba(34,34,34,0.9),rgba(0,0,0,0.7)); background: -o-linear-gradient(rgba(34,34,34,0.9),rgba(0,0,0,0.7)); background: -moz-linear-gradient(rgba(34,34,34,0.9),rgba(0,0,0,0.7)); background: -ms-linear-gradient(rgba(34,34,34,0.9),rgba(0,0,0,0.7)); background: linear-gradient(rgba(34,34,34,0.9),rgba(0,0,0,0.7)); font-size:2.4em; font-weight: bolder; text-align: center; line-height: 2.8em; color: #fff; text-shadow:0 0 0 #eee,0 0 0 #eee,1px 1px 1px #ede,-1px -1px 1px #eee; box-shadow: 0px 2px 6px rgba(16,16,16,0.7); } #content{ position: absolute; top: 10em; left: 0em; bottom: 8em; right: 0em; padding: 0em 2em; } #con_box{ height: 100%; background: #fff; box-shadow:0px 0px 10px rgba(0,0,0,0.9); border: none; border-radius: 10px; padding:0em 8%; position: relative; text-align: center; } .img_box{ width: 100%; max-width: 36%; max-height: 63.4%; height: 100%; display: inline-block; margin-top: 2em; position: relative; } .img_box img{ max-width: 100%; max-height: 100%; width: 100%; height: 100%; vertical-align: middle; } #canvas{ display: none; } .to{ display: inline-block; width: 20%; max-width: 20%; font-size: 3em; font-weight: bolder; } .select_box{ text-align: left; width: 92%; margin:0 auto; margin-top: 2em; } #way_choose{ float: left; margin-right: 2em; } .file_choose,.url_input{ margin: 0 auto; font-weight: bold; font-size:1.4em; text-align: left; display: none; } .file_choose{ display: block; } .file_choose>label{ margin-left: 2em; padding:0 1.2em; font-size: 1.1em; font-weight: bolder; background: #222; color:#fff; } .file_choose>label:hover{ cursor: pointer; box-shadow: 0 0 5px red; } .file_choose>input{ display: none; } .url_input>label{ margin-right: 1em; } .url_input>input{ outline: none; border: 2px solid #dedede; border-radius: 2em; padding-left: 1.5em; width:20em; } .tips{ text-align: left; font-size: 1.2em; font-weight: bold; width: 92%; margin:0 auto; margin-top: 1em; display: none; } .t1{ display: block; } #footer{ position: fixed; bottom: 0em; height: 2.8em; background: #000; line-height: 2.8em; width: 100%; left: 0em; font-size: 1.6em; font-weight: bolder; } #footer>span{ float: left; margin-left:1.5em; } .type_list{ display: inline; margin-right: 2em; } .type_list>li{ display: inline; margin-left: 1em; background: #ffb515; height: 2em; padding:0 0.6em; font-size: 1.05em; color: #fff; text-shadow:-1px 1px 2px rgba(0,0,0,0.7); border-radius:5px; box-shadow:0 0 5px rgba(255,255,255,0.6); } .type_list>li:hover{ cursor: pointer; box-shadow: 0 0 5px rgba(255,0,0,0.7); } #quality{ margin-left: 1em; } #turnTo,#download{ margin-left: 2em; padding: 0 1em; border-radius: 10px; border: 1px solid #d9d9d9; background: -webkit-linear-gradient(#ffffff,#dfdfdf); background: -o-linear-gradient(#ffffff,#dfdfdf); background: -moz-linear-gradient(#ffffff,#dfdfdf); background: linear-gradient(#ffffff,#dfdfdf); box-shadow: 0px 0px 5px rgba(255,255,255,0.7); font-weight: bolder; } #turnTo:hover,#download:hover{ background: -webkit-linear-gradient(#66ccff,#74b1d1); background: -o-linear-gradient(#66ccff,#74b1d1); background: -moz-linear-gradient(#66ccff,#74b1d1); background: -ms-linear-gradient(#66ccff,#74b1d1); background: linear-gradient(#66ccff,#74b1d1); cursor: pointer; border: #6cf 1px solid; } .bgAdd{ background: red !important; }
JS:
//author:孤月 //date:2015/07/17 //变量定义 var sWay = document.getElementById("way_choose"), //获取得到图片链接的方式 sGetUrl = "", //当获取方式为链接时,存放获取的链接地址 sFile = "", //当获取方式为本地时,存放获取的文件信息 sType = "", //获取要转换的格式 nQuali = document.getElementById("quality"); //获取图片转换的质量(压缩比) var urlInput = document.getElementById("urlGet"), file = document.getElementById("file"), sourceImg = document.getElementById("source_img"), previewImg= document.getElementById("preview_img"), canvas = document.getElementById("canvas"), typeList = document.querySelector(".type_list"), turnTo = document.getElementById("turnTo"), download = document.getElementById("download"); var mimeTypeGet, //获取img格式 canDownload=false, //是否可以开始下载 cross, //是否是外链 go=true; //是否文件或链接或转换格式改变 //获取要转换的目标图片类型 function getType () { var type; //侦听click事件 typeList.addEventListener("click",function(e){ e = e || event; if(e.target.tagName.toLowerCase()!="li") return; var val = e.target.innerHTML; var ch = typeList.children; for(var x=0;x100 || val<10) nQuali.value = 50; }; } //img下载 function downlo(){ download.onclick = function(){ if(canDownload) { // 加工image data,替换mime type var imgData = previewImg.src.replace(mimeTypeGet,"image/octet-stream"); //download var down = document.getElementById("downIMG"); down.href = imgData; down.download = "IGotIt-"+(new Date()).getTime()+"."+(sType?sType:"jpg"); var mouseEv = document.createEvent("MouseEvents"); mouseEv.initMouseEvent("click",false,false,window,0,0,0,0,0,false,false,false,false,0,null); down.dispatchEvent(mouseEv); } else { alert("请先进行转换!"); } }; } //转换 function transformImg(){ turnTo.onclick = function(e){ e = e || event; e.stopPropagation(); e.preventDefault(); var type = sType || "jpg" , mimeType, newImage = new Image(), cv = canvas, ct = cv.getContext("2d"); if(type=="jpg") mimeType = "image/jpeg"; else mimeType = "image/"+type; mimeTypeGet = mimeType; if(cross && go){ //获取外链地址并将其传入服务器 var xhr = new XMLHttpRequest(); var nForm = new FormData(); nForm.append("url",sourceImg.src); nForm.append("type",sourceImg.src.substring(sourceImg.src.lastIndexOf("."))); xhr.open("POST","php/send.php"); xhr.send(nForm); xhr.addEventListener("load",function(e){ go = false; var newSrc = e.target.responseText; newImage.src = newSrc; newImage.onload = function(){ previewImg.src=trans().src; nForm.append("del",true); xhr.open("POST","php/del.php"); xhr.send(nForm); }; },false); } else if(go){ newImage.src = sourceImg.src; previewImg.src=trans().src; } function trans(){ cv.width = newImage.width; cv.height= newImage.height; ct.drawImage(newImage,0,0); if(mimeType=="image/jpeg") var newData = cv.toDataURL(mimeType,nQuali.value/100); else var newData = cv.toDataURL(mimeType); var nImage = new Image(); nImage.src = newData; canDownload = true; downlo(); return nImage; } }; } function init(){ getType(); wayChange(); fileChange(); urlInputEnd(); qualityChange(); } init();
PHP:
send.php
del.php
有什么问题和意见欢迎回复,吐槽楼主的人注定单身一辈子(o ̄∇ ̄o)♪
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/85812.html
摘要:前天写完文件上传的时候,老板给了个任务,问我能不能把图片压缩后再上传,并且保证前面的功能能正常使用。于是就想能不能做一个在线的图片转换器。目前仅支持当图片较大时,转格式可能失败作者表示他不知道原因。 前天写完文件上传的时候,老板给了个任务,问我能不能把图片压缩后再上传,并且保证前面的功能能正常使用。虽然最后放弃了这个想法,但我在查资料的过程中看到了canvas的toDataURL这个功...
摘要:图片数据绘制到先构造对象,为,图片之后绘制到的图片文件数据绘制到还是先转换成一个,然后构造对象,为,图片之后绘制到利用上面的函数,由对象得到格式的,再参考图片数据绘制到转换为对象并使用发送转换为对象后,可以使用上传图像文件。 实现功能和适用业务 采集本地摄像头获取摄像头画面,拍照保存,上传服务器; 前端上传图片处理,展示,缩小,裁剪,上传服务器 实现步骤 调取本地摄像头(get...
摘要:图片数据绘制到先构造对象,为,图片之后绘制到的图片文件数据绘制到还是先转换成一个,然后构造对象,为,图片之后绘制到利用上面的函数,由对象得到格式的,再参考图片数据绘制到转换为对象并使用发送转换为对象后,可以使用上传图像文件。 实现功能和适用业务 采集本地摄像头获取摄像头画面,拍照保存,上传服务器; 前端上传图片处理,展示,缩小,裁剪,上传服务器 实现步骤 调取本地摄像头(get...
阅读 2781·2023-04-25 17:59
阅读 647·2023-04-25 15:05
阅读 602·2021-11-25 09:43
阅读 2993·2021-10-12 10:13
阅读 3499·2021-09-27 13:59
阅读 3512·2021-09-23 11:21
阅读 3756·2021-09-08 09:35
阅读 517·2019-08-29 17:12