通過(guò)Canvas及File API縮放并上傳圖片完整示例

1、通過(guò)canvas及file api縮放并上傳圖片完整示例復(fù)制代碼代碼如下: / 參數(shù)，最大高度var max_height = 100;/ 渲染function render(src)/ 創(chuàng)建一個(gè) image 對(duì)象var image = new image();/ 綁定 load 大事處理器，加載完成后執(zhí)行image.onload = function()/ 獵取 canvas dom 對(duì)象var canvas = document.getelementbyid("mycanvas");/ 假如高度超標(biāo)if(image.height > max_hei

2、ght) / 寬度等比例縮放 *=image.width *= max_height / image.height;image.height = max_height;/ 獵取 canvas的 2d 環(huán)境對(duì)象,/ 可以理解context是管理員，canvas是房子var ctx = canvas.getcontext("2d");/ canvas清屏ctx.clearrect(0, 0, canvas.width, canvas.height);/ 重置canvas寬高canvas.width = image.width;canvas.height = im

3、age.height;/ 將圖像繪制到canvas上ctx.drawimage(image, 0, 0, image.width, image.height);/ ! 注重，image 沒(méi)有加入到 dom之中;/ 設(shè)置src屬性，掃瞄器會(huì)自動(dòng)加載。/ 記住必需先綁定大事，才干設(shè)置src屬性，否則會(huì)出同步問(wèn)題。image.src = src; 在上面的例子中，你可以用法canvas 的 todataurl() 辦法獵取圖像的 base64編碼的值(可以類似理解為16進(jìn)制字符串,或者二進(jìn)制數(shù)據(jù)流).注重： canvas 的 todataurl() 獵取的url以字符串開(kāi)始，有22個(gè)無(wú)用的數(shù)據(jù) &a

4、mp;quot;data:image/png;base64,"，需要在客戶端或者服務(wù)端舉行過(guò)濾.原則上只要掃瞄器支持，url地址的長(zhǎng)度是沒(méi)有限制的，而1024的長(zhǎng)度限制，是老一代ie所獨(dú)有的。 請(qǐng)問(wèn),如何獵取我們需要的圖像呢？好孩子,很興奮你能這么問(wèn)。你并不能通過(guò)file 輸入框來(lái)挺直處理，你從這個(gè)文件輸入框元素所能獵取的僅僅是用戶所挑選文件的path路徑。根據(jù)常規(guī)想象，你可以通過(guò)這個(gè)path路徑信息來(lái)加載圖像，但是，在掃瞄器里面這是不現(xiàn)實(shí)的。(譯者注:掃瞄器廠商必需保證自己的掃瞄器肯定平安，才干獲得市場(chǎng)，起碼避開(kāi)媒體的襲擊，假如允許這樣做，那惡意網(wǎng)址可以通過(guò)拼湊文件路徑來(lái)嘗

5、試獵取某些敏感信息).為了實(shí)現(xiàn)這個(gè)需求，我們可以用法html5的file api 來(lái)讀取用戶磁盤(pán)上的文件，并用這個(gè)file來(lái)作為圖像的源(src,source). file api簡(jiǎn)介新的file api接口是在不違反任何平安沙盒規(guī)章下，讀取和列出用戶文件名目的一個(gè)途徑—— 通過(guò)沙盒(sandbox)限制，惡意網(wǎng)站并不能將病毒寫(xiě)入用戶磁盤(pán)，固然更不能執(zhí)行。我們要用法的文件讀取對(duì)象叫做 filereader,filereader允許開(kāi)發(fā)者讀取文件的內(nèi)容(詳細(xì)掃瞄器的實(shí)現(xiàn)方式可能大不相同)。 假設(shè)我們已經(jīng)獵取了圖像文件的path路徑，那么依靠前面的代碼，用法

6、filereader來(lái)加載和渲染圖像就變得很簡(jiǎn)單了： 復(fù)制代碼代碼如下: / 加載 圖像文件(url路徑)function loadimage(src)/ 過(guò)濾掉 非 image 類型的文件if(!src.type.match(/image.*/)if(window.console)console.log("挑選的文件類型不是: ", src.type); else window.confirm("只能挑選文件");return;/ 創(chuàng)建 filereader 對(duì)象 并調(diào)用 render 函數(shù)來(lái)完成渲染.var reade

7、r = new filereader();/ 綁定load大事自動(dòng)回調(diào)函數(shù)reader.onload = function(e)/ 調(diào)用前面的 render 函數(shù)render(e.target.result);/ 讀取文件內(nèi)容reader.readasdataurl(src); 請(qǐng)問(wèn)，如何獵取文件呢？小白兔，要有耐煩！我們的下一步就是獵取文件，固然有好多辦法可以實(shí)現(xiàn)啦。例如：你可以用文本框讓用戶輸入文件路徑，但很明顯大多數(shù)用戶都不是開(kāi)發(fā)者，對(duì)輸入什么值根本就不了解.為了用戶用法便利，我們采納 drag and drop api接口。 用法 drag and drop api拖拽接口(drag

8、and drop)十分容易——在大多數(shù)的dom元素上，你都可以通過(guò)綁定大事處理器來(lái)實(shí)現(xiàn). 只要用戶從磁盤(pán)上拖動(dòng)一個(gè)文件到dom對(duì)象上并敞開(kāi)鼠標(biāo)，那我們就可以讀取這個(gè)文件。代碼如下： 復(fù)制代碼代碼如下: function init()/ 獵取dom元素對(duì)象var target = document.getelementbyid("drop-target");/ 阻擋 dragover(拖到dom元素上方) 大事傳遞target.addeventlistener("dragover",

9、function(e)e.preventdefault();, true);/ 拖動(dòng)并敞開(kāi)鼠標(biāo)的大事target.addeventlistener("drop", function(e)/ 阻擋默認(rèn)大事，以及大事傳揚(yáng)e.preventdefault();/ 調(diào)用前面的加載圖像 函數(shù)，參數(shù)為datatransfer對(duì)象的第一個(gè)文件loadimage(e.datatransfer.files0);, true);var setheight = document.getelementbyid("setheight");var m

10、axheight = document.getelementbyid("maxheight");setheight.addeventlistener("click", function(e)/var value = maxheight.value;if(/d+$/.test(value)max_height = parseint(value);e.preventdefault();,true);var btnsend = document.getelementbyid("btnsend"

11、);btnsend.addeventlistener("click", function(e)/sendimage();,true); 我們還可以做一些其他的處理，比如顯示預(yù)覽圖。但假如不想壓縮的話，那很可能沒(méi)什么用。我們將采納ajax通過(guò)http 的post方式上傳數(shù)據(jù)。下面的例子是用法dojo框架來(lái)完成哀求的，固然你也可以采納其他的ajax技術(shù)來(lái)實(shí)現(xiàn).dojo 代碼如下: 復(fù)制代碼代碼如下: / 譯者并不懂dojo，所以將在后面附上jquery的實(shí)現(xiàn)/ remember that dtk 1.7+ is amd!require("doj

12、o/request", function(request)/ 設(shè)置哀求url,參數(shù)，以及回調(diào)。request.post("image-handler.php", data: imagename: "myimage.png",imagedata: encodeuricomponent(document.getelementbyid("canvas").todataurl("image/png").then(function(text)c

13、onsole.log("the server returned: ", text););); jquery 實(shí)現(xiàn)如下： 復(fù)制代碼代碼如下: / 上傳，jquery版function sendimage()/ 獵取 canvas dom 對(duì)象var canvas = document.getelementbyid("mycanvas");/ 獵取base64編碼后的圖像數(shù)據(jù)，格式是字符串/ "data:image/png;base64,"開(kāi)始,需要在客戶端或者服務(wù)器端將其去掉，后面的部分可

14、以挺直寫(xiě)入文件。var dataurl = canvas.todataurl("image/png");/ 為平安 對(duì)uri舉行編碼/ data%3aimage%2fpng%3bbase64%2c 開(kāi)始var imagedata = encodeuricomponent(dataurl);/var url = $("form").attr("action");/ 1. 假如form表單不益處理,可以用法某個(gè)hidden躲藏域來(lái)設(shè)置哀求地址/var url = $("in

15、putname=&39;action&39;").val();/ 2. 也可以挺直用某個(gè)dom對(duì)象的屬性來(lái)獵取/ var url = $("imageaction").attr("action");/ 由于是string，所以服務(wù)器需要對(duì)數(shù)據(jù)舉行轉(zhuǎn)碼，寫(xiě)文件操作等。/ 個(gè)人商定，全部http參數(shù)名字所有小寫(xiě)console.log(dataurl);/console.log(imagedata);var data = imagename: "myimage.png&

16、quot;,imagedata: imagedata;jquery.ajax( url : url,data : data,type : "post",/ 期盼的返回值類型datatype: "json",complete : function(xhr,result) /console.log(xhr.responsetext);var $tip2 = $("tip2");if(!xhr)$tip2.text(&39;網(wǎng)絡(luò)銜接失敗!&39;);return false;v

17、ar text = xhr.responsetext;if(!text)$tip2.text(&39;網(wǎng)絡(luò)錯(cuò)誤!&39;);return false;var json = eval("("+text+")");if(!json)$tip2.text(&39;解析錯(cuò)誤!&39;);return false; else $tip2.text(json.message);/console.dir(json);/console.log(xhr.responsetext);); ok,搞定！你還需要做

18、的，就是創(chuàng)建一個(gè)只管的用戶界面，并允許你控制的大小。上傳到服務(wù)器端的數(shù)據(jù)，并不需要處理enctype為 multi-part/form-data 的狀況，僅僅一個(gè)容易的post表單處理程序就可以了.好了，下面附上完整的代碼示例： 復(fù)制代碼代碼如下: 通過(guò)canvas及file api縮放并上傳/ 參數(shù)，最大高度var max_height = 100;/ 渲染function render(src)/ 創(chuàng)建一個(gè) image 對(duì)象var image = new image();/ 綁定 load 大事處理器，加載完成后執(zhí)行image.onload = function()/ 獵取 canvas

19、dom 對(duì)象var canvas = document.getelementbyid("mycanvas");/ 假如高度超標(biāo)if(image.height > max_height) / 寬度等比例縮放 *=image.width *= max_height / image.height;image.height = max_height;/ 獵取 canvas的 2d 環(huán)境對(duì)象,/ 可以理解context是管理員，canvas是房子var ctx = canvas.getcontext("2d");/ canva

20、s清屏ctx.clearrect(0, 0, canvas.width, canvas.height);/ 重置canvas寬高canvas.width = image.width;canvas.height = image.height;/ 將圖像繪制到canvas上ctx.drawimage(image, 0, 0, image.width, image.height);/ ! 注重，image 沒(méi)有加入到 dom之中;/ 設(shè)置src屬性，掃瞄器會(huì)自動(dòng)加載。/ 記住必需先綁定大事，才干設(shè)置src屬性，否則會(huì)出同步問(wèn)題。image.src = src;/ 加載 圖像文件(url路徑)func

21、tion loadimage(src)/ 過(guò)濾掉 非 image 類型的文件if(!src.type.match(/image.*/)if(window.console)console.log("挑選的文件類型不是: ", src.type); else window.confirm("只能挑選文件");return;/ 創(chuàng)建 filereader 對(duì)象 并調(diào)用 render 函數(shù)來(lái)完成渲染.var reader = new filereader();/ 綁定load大事自動(dòng)回調(diào)函數(shù)reader.onload = func

22、tion(e)/ 調(diào)用前面的 render 函數(shù)render(e.target.result);/ 讀取文件內(nèi)容reader.readasdataurl(src);/ 上傳，jquery版function sendimage()/ 獵取 canvas dom 對(duì)象var canvas = document.getelementbyid("mycanvas");/ 獵取base64編碼后的圖像數(shù)據(jù)，格式是字符串/ "data:image/png;base64,"開(kāi)始,需要在客戶端或者服務(wù)器端將其去掉，后面的部分可以挺直寫(xiě)入文

23、件。var dataurl = canvas.todataurl("image/png");/ 為平安 對(duì)uri舉行編碼/ data%3aimage%2fpng%3bbase64%2c 開(kāi)始var imagedata = encodeuricomponent(dataurl);/var url = $("form").attr("action");/ 1. 假如form表單不益處理,可以用法某個(gè)hidden躲藏域來(lái)設(shè)置哀求地址/var url = $("inputnam

24、e=&39;action&39;").val();/ 2. 也可以挺直用某個(gè)dom對(duì)象的屬性來(lái)獵取/ var url = $("imageaction").attr("action");/ 由于是string，所以服務(wù)器需要對(duì)數(shù)據(jù)舉行轉(zhuǎn)碼，寫(xiě)文件操作等。/ 個(gè)人商定，全部http參數(shù)名字所有小寫(xiě)console.log(dataurl);/console.log(imagedata);var data = imagename: "myimage.png",

25、imagedata: imagedata;jquery.ajax( url : url,data : data,type : "post",/ 期盼的返回值類型datatype: "json",complete : function(xhr,result) /console.log(xhr.responsetext);var $tip2 = $("tip2");if(!xhr)$tip2.text(&39;網(wǎng)絡(luò)銜接失敗!&39;);return false;var tex

26、t = xhr.responsetext;if(!text)$tip2.text(&39;網(wǎng)絡(luò)錯(cuò)誤!&39;);return false;var json = eval("("+text+")");if(!json)$tip2.text(&39;解析錯(cuò)誤!&39;);return false; else $tip2.text(json.message);/console.dir(json);/console.log(xhr.responsetext););function init()/ 獵取dom元素對(duì)象var target = document.getelementbyid("drop-target");/ 阻擋 dragover(拖到dom元素上方) 大事傳遞target.addeventlistener("dragover", function(e)e.preventdefault();, true);/ 拖動(dòng)并敞開(kāi)鼠標(biāo)的大事target.addeventlistener("drop&q