前天写完文件上传的时候，老板给了个任务，问我能不能把图片压缩后再上传，并且保证前面的功能能正常使用。虽然最后放弃了这个想法，但我在查资料的过程中看到了canvas的toDataURL这个功能。于是就想能不能做一个在线的图片转换器。在经过一天的辛苦耕耘后（我是不会告诉你们我在事件绑定上浪费了半天时间( ´艸｀)ﾑﾌﾟﾌﾟ），总算弄出个大概了。虽然还有一些东西不太明白，但总体没什么问题了。

有关html5图片跨域可以参考这篇文章：

感谢下面的文章提供的学习方向：

演示地址：

首先

    
    
    
    
     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;x
    
     100 || 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

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