html5 canvas 在线图片转换器

前天写完文件上传的时候，老板给了个任务，问我能不能把图片压缩后再上传，并且保证前面的功能能正常使用。虽然最后放弃了这个想法，但我在查资料的过程中看到了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:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IMGFormat</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/format.css">
</head>
<body>
<header id="header">IMGFormat</header>
<section id="content"><section id="con_box"><div class="img_box"><img src="img/1.jpg" id="source_img"></div><canvas id="canvas"></canvas><div class="to">TO</div><div class="img_box"><img src="img/1.jpg" id="preview_img"></div><div class="select_box"><select id="way_choose"><option selected="selected">本地文件选择</option><option>网络文件选择</option></select><section class="file_choose"><span>请选择image文件:</span><label for="file">+</label><input type="file" id="file" name="file" accpet="image/*"></section><section class="url_input"><label for="urlGet">请输入图片链接:</label><input type="text" id="urlGet" name="urlGet" placeholder="如：http://www.xx.com/1.jpg"></section></div><div class="tips t1">使用链接时请注意图片是否是外链。目前仅支持：jpg|png|gif|bmp</div><div class="tips t2">当图片较大时，转png格式可能失败（作者表示他不知道原因Σ(ﾟдﾟlll)）。如果有谁知道的话，欢迎在文章下面的评论留言，谢谢。</div></section>
</section>
<footer id="footer"><span>转换格式选择:</span><ul class="type_list"><li class="bgAdd">JPG</li><li>PNG</li></ul><label for="quality">图片质量:</label><input id="quality" name="quality" type="number" min="10" max="100" step="10" value="50"><button id="turnTo">转换</button><button id="download">下载</button>
</footer>
<a id="downIMG"></a>
<script type="text/javascript" src="js/format.js"></script>
</body>
</html>

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;x<ch.length;x++)ch[x].setAttribute("class","");e.target.setAttribute("class","bgAdd");//当目标类型改变时，允许转换if(sType!=val.toLowerCase)go = true;sType = val.toLowerCase();if(sType=="jpg"){document.getElementById("quality").style.display="inline-block";document.querySelector(".t2").style.display="none";document.querySelector(".t1").style.display="block";}else{document.getElementById("quality").style.display="none";document.querySelector(".t1").style.display="none";document.querySelector(".t2").style.display="block";}},false);
}//获取图片取得方式
function wayChange(){//侦听change事件sWay.addEventListener("change",function(){var fc = document.querySelector(".file_choose"),ui = document.querySelector(".url_input");(sWay.value=="本地文件选择")?FileShow():UrlShow();function FileShow(){fc.style.display = "block";ui.style.display = "none";cross = false;};function UrlShow(){fc.style.display = "none";ui.style.display = "block";cross = true;}turnTo.style.display = "none";download.style.display="none";file.value = "";urlGet.value = "";},false);
}//当文件域变化
function fileChange(){file.addEventListener("change",function(){//读取文件var files = file.files[0];var reader = new FileReader();reader.onload = function(e){go = true;e = e || event;sourceImg.src = e.target.result;turnTo.style.display = "inline-block";download.style.display="inline-block";transformImg();};reader.readAsDataURL(files);},false);
}//当地址输入完毕
function urlInputEnd(){var match;urlInput.addEventListener("blur",function(){//匹配链接if(!urlInput.value)return;match = /.jpg|.png|.gif|.bmp/;sGetUrl = urlGet.value;var temp = sGetUrl.substring(sGetUrl.lastIndexOf("."));if(match.test(temp)){sourceImg.src = sGetUrl;sourceImg.onload = function(){go = true;turnTo.style.display = "inline-block";download.style.display="inline-block";transformImg();};}},false)
}//压缩比变化时
function qualityChange(){nQuali.onchange = function(e){//限制取值var val = e.target.value.toFixed(0);if(!val || val>100 || val<10)nQuali.value = 50;};
}//img下载
function downlo(){download.onclick = function(){if(canDownload){  // 加工image data，替换mime typevar imgData = previewImg.src.replace(mimeTypeGet,'image/octet-stream');//downloadvar 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";elsemimeType = "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);elsevar 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

<?php
session_start();
if(!$_POST)
return false;
$dataUrl = trim(mb_convert_encoding($_POST['url'],'gbk','utf-8'));
$type = $_POST['type'];$path = "../";
$random = time().rand(1,10000);
$dir  = "source/".$random."/";
$name = rand(10000,20000).$type;if(!is_dir($path.$dir))
{mkdir($path.$dir);chmod($path.$dir,0777);
}$newImageData = @file_get_contents($dataUrl);$createImg = fopen($path.$dir.$name,'w+');
fwrite($createImg,$newImageData);
fclose($createImg);$_SESSION['dir'] = $path.$dir;
$_SESSION['file']= $name;echo $dir.$name;
?>

del.php

<?php
session_start();
if(!$_POST)
return false;$del = $_POST['del'];if($del)
{@unlink($_SESSION['dir'].$_SESSION['file']);rmdir($_SESSION['dir']);
}session_destroy();
?>

有什么问题和意见欢迎回复，吐槽楼主的人注定单身一辈子(ｏ￣∇￣ｏ)♪

html5 canvas 在线图片转换器相关推荐

图片涂鸦html插件,HTML5 canvas 在线涂鸦
插件地址采用技术 jq-signature.min.js Developed using jQuery 2.1.4. Insert title here $(function(){ $('.js-s ...
HTML5 canvas 在线画笔绘图工具（三）
组装画板(TDrawBuilder) 在这一小节中我们要把工具条和画板组装起来,让他们可以协同进行工作. 画板通过一个命名为TDrawBuilder来进行组装.在详细讲解TDrawBuilder对象之 ...
如何消除图片锯齿 html,Html5 canvas drawImage图片抗锯齿
Html5 canvas drawImage图片抗锯齿2018-01-26 11:17 虽然drawImage会自动应用消除锯齿,但如果是从大尺寸变为小尺寸,某些图像就不尽人意了,比如曲线. 对于可能 ...
HTML5 canvas 在线画笔绘图工具（一）
HTML5 canvas 在线画笔绘图工具(一) 功能介绍这是我用Javascript写的第一个程序,在写的过程中走了很多弯路,所以写完之后想分享出来,给与我一样的初学者做为学习的参考,同时在 ...
html5 canvas实现图片玻璃碎片特效
今天要为大家带来一款html5 canvas实现的图片玻璃碎片特效.图片以玻璃碎片的形式出现到界面中,然后似玻璃被打碎的效果渐消息.效果图如下: 在线预览源码下载实现代码: html代码: & ...
利用HTML5 canvas合并图片并解决Filaed to execute 'toDataURL' on 'HTMLCanvasElement'异常
有两张图片,如下图所示,如何将两张图片合并成一张? 使用HTML5的canvas相关知识可以简单快捷地解决此需求. 目录结构: 源码使用原生js,不需要引入第三方库: <!DOCTYPE htm ...
html 图片剪裁压缩,HTML5 canvas实现图片拉伸、压缩与裁剪
前言: 我们在网页中经常会用到图片展示,通常情况下会给一个固定的宽高来显示这个图片,然而从服务器端上传的图片大小是不确定的,如果直接按默认填充这个框有时候就会特别丑orz.作为一个完(wai)美(ma ...
html5在线裁剪,html5 Canvas裁剪图片
drawImage(图片,图片中裁减的起始x坐标,图片中裁减的起始y坐标,裁减区域宽度,裁减区域高度,所画位置x坐标,所画位置y坐标,所画图形宽度,所画图形高度) 首先来看如下效果: 代码如下: va ...
html如何使图片不自动填充颜色,使用HTML5 Canvas为图片填充颜色和纹理的教程
填充颜色艺术离不开色彩,今天咱们来介绍一下填充颜色,体会一下色彩的魅力. 填充颜色主要分为两种: 1.基本颜色 2.渐变颜色(又分为线性渐变与径向渐变) 我们一个个来看. 填充基本颜色Canvas ...

html5 canvas 在线图片转换器

html5 canvas 在线图片转换器相关推荐

最新文章

热门文章