摘要：前天寫完文件上傳的時候，老板給了個任務，問我能不能把圖片壓縮后再上傳，并且保證前面的功能能正常使用。于是就想能不能做一個在線的圖片轉換器。目前僅支持當圖片較大時，轉格式可能失敗作者表示他不知道原因。

前天寫完文件上傳的時候，老板給了個任務，問我能不能把圖片壓縮后再上傳，并且保證前面的功能能正常使用。雖然最后放棄了這個想法，但我在查資料的過程中看到了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

    

        

        
        
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

有什么問題和意見歡迎回復，吐槽樓主的人注定單身一輩子(ｏ￣?￣ｏ)?