怎么通過Canvas及File API縮放并上傳圖片

本文小編為大家詳細介紹“怎么通過Canvas及File API縮放并上傳圖片”，內容詳細，步驟清晰，細節處理妥當，希望這篇“怎么通過Canvas及File API縮放并上傳圖片”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

代碼如下:

// 參數，最大高度

var MAX_HEIGHT = 100;

// 渲染

function render(src){

// 創建一個 Image 對象

var image = new Image();

// 綁定 load 事件處理器，加載完成后執行

image.onload = function(){

// 獲取 canvas DOM 對象

var canvas = document.getElementById("myCanvas");

// 如果高度超標

if(image.height > MAX_HEIGHT) {

// 寬度等比例縮放 *=

image.width *= MAX_HEIGHT / image.height;

image.height = MAX_HEIGHT;

}

// 獲取 canvas的 2d 環境對象,

// 可以理解Context是管理員，canvas是房子

var ctx = canvas.getContext("2d");

// canvas清屏

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 沒有加入到 dom之中

};

// 設置src屬性，瀏覽器會自動加載。

// 記住必須先綁定事件，才能設置src屬性，否則會出同步問題。

image.src = src;

};

在上面的例子中，你可以使用canvas 的 toDataURL() 方法獲取圖像的 Base64編碼的值(可以類似理解為16進制字符串,或者二進制數據流).

注意： canvas 的 toDataURL() 獲取的URL以字符串開頭，有22個無用的數據 "data:image/png;base64,"，需要在客戶端或者服務端進行過濾.

原則上只要瀏覽器支持，URL地址的長度是沒有限制的，而1024的長度限制，是老一代IE所獨有的。

請問,如何獲取我們需要的圖像呢？

好孩子,很高興你能這么問。你并不能通過File 輸入框來直接處理，你從這個文件輸入框元素所能獲取的僅僅是用戶所選擇文件的path路徑。按照常規想象，你可以通過這個path路徑信息來加載圖像，但是，在瀏覽器里面這是不現實的。(譯者注:瀏覽器廠商必須保證自己的瀏覽器絕對安全，才能獲得市場，至少避免媒體的攻擊，如果允許這樣做，那惡意網址可以通過拼湊文件路徑來嘗試獲取某些敏感信息).

為了實現這個需求，我們可以使用HTML5的File API 來讀取用戶磁盤上的文件，并用這個file來作為圖像的源(src,source).

File API簡介

新的File API接口是在不違背任何安全沙盒規則下，讀取和列出用戶文件目錄的一個途徑—— 通過沙盒(sandbox)限制，惡意網站并不能將病毒寫入用戶磁盤，當然更不能執行。

我們要使用的文件讀取對象叫做 FileReader,FileReader允許開發者讀取文件的內容(具體瀏覽器的實現方式可能大不相同)。

假設我們已經獲取了圖像文件的path路徑，那么依賴前面的代碼，使用FileReader來加載和渲染圖像就變得很容易了：

復制代碼

代碼如下:

// 加載 圖像文件(url路徑)

function loadImage(src){

// 過濾掉 非 image 類型的文件

if(!src.type.match(/image.*/)){

if(window.console){

console.log("選擇的文件類型不是圖片: ", src.type);

} else {

window.confirm("只能選擇圖片文件");

}

return;

}

// 創建 FileReader 對象 并調用 render 函數來完成渲染.

var reader = new FileReader();

// 綁定load事件自動回調函數

reader.onload = function(e){

// 調用前面的 render 函數

render(e.target.result);

};

// 讀取文件內容

reader.readAsDataURL(src);

};

請問，如何獲取文件呢？

小白兔，要有耐心！我們的下一步就是獲取文件，當然有好多方法可以實現啦。例如：你可以用文本框讓用戶輸入文件路徑，但很顯然大多數用戶都不是開發者，對輸入什么值根本就不了解.

為了用戶使用方便，我們采用 Drag and Drop API接口。

使用 Drag and Drop API

拖拽接口(Drag and Drop)非常簡單——在大多數的DOM元素上，你都可以通過綁定事件處理器來實現. 只要用戶從磁盤上拖動一個文件到dom對象上并放開鼠標，那我們就可以讀取這個文件。代碼如下：

復制代碼

代碼如下:

function init(){

// 獲取DOM元素對象

var target = document.getElementById("drop-target");

// 阻止 dragover(拖到DOM元素上方) 事件傳遞

target.addEventListener("dragover", function(e){e.preventDefault();}, true);

// 拖動并放開鼠標的事件

target.addEventListener("drop", function(e){

// 阻止默認事件，以及事件傳播

e.preventDefault();

// 調用前面的加載圖像 函數，參數為dataTransfer對象的第一個文件

loadImage(e.dataTransfer.files[0]);

}, true);

var setheight = document.getElementById("setheight");

var maxheight = 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");

btnsend.addEventListener("click", function(e){

//

sendImage();

},true);

};

我們還可以做一些其他的處理，比如顯示預覽圖。但如果不想壓縮圖片的話，那很可能沒什么用。我們將采用Ajax通過HTTP 的post方式上傳圖片數據。下面的例子是使用Dojo框架來完成請求的，當然你也可以采用其他的Ajax技術來實現.

Dojo 代碼如下:

復制代碼

代碼如下:

// 譯者并不懂Dojo，所以將在后面附上jQuery的實現

// Remember that DTK 1.7+ is AMD!

require(["dojo/request"], function(request){

// 設置請求URL,參數，以及回調。

request.post("image-handler.php", {

data: {

imageName: "myImage.png",

imageData: encodeURIComponent(document.getElementById("canvas").toDataURL("image/png"))

}

}).then(function(text){

console.log("The server returned: ", text);

});

});

jQuery 實現如下：

復制代碼

代碼如下:

// 上傳圖片，jQuery版

function sendImage(){

// 獲取 canvas DOM 對象

var canvas = document.getElementById("myCanvas");

// 獲取Base64編碼后的圖像數據，格式是字符串

// "data:image/png;base64,"開頭,需要在客戶端或者服務器端將其去掉，后面的部分可以直接寫入文件。

var dataurl = canvas.toDataURL("image/png");

// 為安全 對URI進行編碼

// data%3Aimage%2Fpng%3Bbase64%2C 開頭

var imagedata = encodeURIComponent(dataurl);

//var url = $("#form").attr("action");

// 1. 如果form表單不好處理,可以使用某個hidden隱藏域來設置請求地址

// <input type="hidden" name="action" value="receive.jsp" />

var url = $("input[name='action']").val();

// 2. 也可以直接用某個dom對象的屬性來獲取

// <input id="imageaction" type="hidden" action="receive.jsp">

// var url = $("#imageaction").attr("action");

// 因為是string，所以服務器需要對數據進行轉碼，寫文件操作等。

// 個人約定，所有http參數名字全部小寫

console.log(dataurl);

//console.log(imagedata);

var data = {

imagename: "myImage.png",

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('網絡連接失敗!');

return false;

}

var text = xhr.responseText;

if(!text){

$tip2.text('網絡錯誤!');

return false;

}

var json = eval("("+text+")");

if(!json){

$tip2.text('解析錯誤!');

return false;

} else {

$tip2.text(json.message);

}

//console.dir(json);

//console.log(xhr.responseText);

}

});

};

OK,搞定！你還需要做的，就是創建一個只管的用戶界面，并允許你控制圖片的大小。上傳到服務器端的數據，并不需要處理enctype為 multi-part/form-data 的情況，僅僅一個簡單的POST表單處理程序就可以了.

好了，下面附上完整的代碼示例：

復制代碼

代碼如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE html>

<html>

<head>

<title>通過Canvas及File API縮放并上傳圖片</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

<meta http-equiv="keywords" content="Canvas,File,Image">

<meta http-equiv="description" content="2013年8月8日,renfufei@qq.com">

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script>

// 參數，最大高度

var MAX_HEIGHT = 100;

// 渲染

function render(src){

// 創建一個 Image 對象

var image = new Image();

// 綁定 load 事件處理器，加載完成后執行

image.onload = function(){

// 獲取 canvas DOM 對象

var canvas = document.getElementById("myCanvas");

// 如果高度超標

if(image.height > MAX_HEIGHT) {

// 寬度等比例縮放 *=

image.width *= MAX_HEIGHT / image.height;

image.height = MAX_HEIGHT;

}

// 獲取 canvas的 2d 環境對象,

// 可以理解Context是管理員，canvas是房子

var ctx = canvas.getContext("2d");

// canvas清屏

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 沒有加入到 dom之中

};

// 設置src屬性，瀏覽器會自動加載。

// 記住必須先綁定事件，才能設置src屬性，否則會出同步問題。

image.src = src;

};

// 加載 圖像文件(url路徑)

function loadImage(src){

// 過濾掉 非 image 類型的文件

if(!src.type.match(/image.*/)){

if(window.console){

console.log("選擇的文件類型不是圖片: ", src.type);

} else {

window.confirm("只能選擇圖片文件");

}

return;

}

// 創建 FileReader 對象 并調用 render 函數來完成渲染.

var reader = new FileReader();

// 綁定load事件自動回調函數

reader.onload = function(e){

// 調用前面的 render 函數

render(e.target.result);

};

// 讀取文件內容

reader.readAsDataURL(src);

};

// 上傳圖片，jQuery版

function sendImage(){

// 獲取 canvas DOM 對象

var canvas = document.getElementById("myCanvas");

// 獲取Base64編碼后的圖像數據，格式是字符串

// "data:image/png;base64,"開頭,需要在客戶端或者服務器端將其去掉，后面的部分可以直接寫入文件。

var dataurl = canvas.toDataURL("image/png");

// 為安全 對URI進行編碼

// data%3Aimage%2Fpng%3Bbase64%2C 開頭

var imagedata = encodeURIComponent(dataurl);

//var url = $("#form").attr("action");

// 1. 如果form表單不好處理,可以使用某個hidden隱藏域來設置請求地址

// <input type="hidden" name="action" value="receive.jsp" />

var url = $("input[name='action']").val();

// 2. 也可以直接用某個dom對象的屬性來獲取

// <input id="imageaction" type="hidden" action="receive.jsp">

// var url = $("#imageaction").attr("action");

// 因為是string，所以服務器需要對數據進行轉碼，寫文件操作等。

// 個人約定，所有http參數名字全部小寫

console.log(dataurl);

//console.log(imagedata);

var data = {

imagename: "myImage.png",

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('網絡連接失敗!');

return false;

}

var text = xhr.responseText;

if(!text){

$tip2.text('網絡錯誤!');

return false;

}

var json = eval("("+text+")");

if(!json){

$tip2.text('解析錯誤!');

return false;

} else {

$tip2.text(json.message);

}

//console.dir(json);

//console.log(xhr.responseText);

}

});

};

function init(){

// 獲取DOM元素對象

var target = document.getElementById("drop-target");

// 阻止 dragover(拖到DOM元素上方) 事件傳遞

target.addEventListener("dragover", function(e){e.preventDefault();}, true);

// 拖動并放開鼠標的事件

target.addEventListener("drop", function(e){

// 阻止默認事件，以及事件傳播

e.preventDefault();

// 調用前面的加載圖像 函數，參數為dataTransfer對象的第一個文件

loadImage(e.dataTransfer.files[0]);

}, true);

var setheight = document.getElementById("setheight");

var maxheight = 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");

btnsend.addEventListener("click", function(e){

//

sendImage();

},true);

};

window.addEventListener("DOMContentLoaded", function() {

//

init();

},false);

</script>

</head>

<body>

<div>

<h2>通過Canvas及File API縮放并上傳圖片</h2>

<p>從文件夾拖動一張照片到下方的盒子里， canvas 和 JavaScript將會自動的進行縮放.</p>

<div>

<input type="text" id="maxheight" value="100"/>

<button id="setheight">設置圖片最大高度</button>

<input type="hidden" name="action" value="receive.jsp" />

</div>

<div id="preview-row">

<div id="drop-target" style="width:400px;height:200px;min-height:100px;min-width:200px;background:#eee;cursor:pointer;">拖動圖片文件到這里...</div>

<div>

<div>

<button id="btnsend"> 上 傳 </button> <span id="tip2" style="padding:8px 0;color:#f00;"></span>

</div>

</div>

<div><h5>縮略圖：</h5></div>

<div id="preview" style="background:#f4f4f4;width:400px;height:200px;min-height:100px;min-width:200px;">

<canvas id="myCanvas"></canvas>

</div>

</div>

</div>

</body>

</html>

服務端頁面，receive.jsp

復制代碼

代碼如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@page import="sun.misc.BASE64Decoder"%>

<%@page import="java.io.*"%>

<%@page import="org.springframework.web.util.UriComponents"%>

<%@page import="java.net.URLDecoder"%>

<%!

// 本文件：/receive.jsp

// 圖片存放路徑

String photoPath = "D:/blog/upload/photo/";

File photoPathFile = new File(photoPath);

// references: http://blog.csdn.net/remote_roamer/article/details/2979822

private boolean saveImageToDisk(byte[] data,String imageName) throws IOException{

int len = data.length;

//

// 寫入到文件

FileOutputStream outputStream = new FileOutputStream(new File(photoPathFile,imageName));

outputStream.write(data);

outputStream.flush();

outputStream.close();

//

return true;

}

private byte[] decode(String imageData) throws IOException{

BASE64Decoder decoder = new BASE64Decoder();

byte[] data = decoder.decodeBuffer(imageData);

for(int i=0;i<data.length;++i)

{

if(data[i]<0)

{

//調整異常數據

data[i]+=256;

}

}

//

return data;

}

%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<%

//如果是IE，那么需要設置為text/html,否則會彈框下載

//response.setContentType("text/html;charset=UTF-8");

response.setContentType("application/json;charset=UTF-8");

//

String imageName = request.getParameter("imagename");

String imageData = request.getParameter("imagedata");

int success = 0;

String message = "";

if(null == imageData || imageData.length() < 100){

// 數據太短，明顯不合理

message = "上傳失敗,數據太短或不存在";

} else {

// 去除開頭不合理的數據

imageData = imageData.substring(30);

imageData = URLDecoder.decode(imageData,"UTF-8");

//System.out.println(imageData);

byte[] data = decode(imageData);

int len = data.length;

int len2 = imageData.length();

if(null == imageName || imageName.length() < 1){

imageName = System.currentTimeMillis()+".png";

}

saveImageToDisk(data,imageName);

//

success = 1;

message = "上傳成功,參數長度:"+len2+"字符，解析文件大小:"+len+"字節";

}

// 后臺打印

System.out.println("message="+message);

%>

{

"message": "<%=message %>",

"success": <%=success %>

}

讀到這里，這篇“怎么通過Canvas及File API縮放并上傳圖片”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。