So zoomen und laden Sie Bilder über die Canvas- und Datei-API hoch

In diesem Artikel wird hauptsächlich das Zoomen und Hochladen von Bildern über die Canvas- und Datei-API beschrieben. Jetzt kann ich ihn mit allen Freunden teilen, die ihn benötigen.

Erstellen Sie einen Benutzer, der dies tut kümmert sich um die Benutzeroberfläche und ermöglicht Ihnen die Steuerung der Bildgröße. Die auf den Server hochgeladenen Daten müssen nicht die Situation bewältigen, in der es sich um mehrteilige/Formulardaten handelt. Ein einfacher POST-Formularhandler reicht aus. Das vollständige Codebeispiel finden Sie unten Beispieladresse: Canvas Resize Demo
Originalautor: Dr. Tom Trenka
Originaldatum: 6. August 2013
Übersetzungsdatum: 8. August 2013

Tom Trenka kann einen Artikel schreiben für „ „mein“ Blog ist für mich eine große Ehre. Tom war einer der ursprünglichen Mitwirkenden am Dojo-Framework und mein Mentor bei SitePen. Ich habe seine Genialität auf höchstem Niveau erlebt und er war immer der Erste, der viele schwierige Probleme mit zukunftsweisenden Lösungen vorhergesehen hat. Er denkt immer von außen und löst Randprobleme auf unkonventionelle, aber solide Weise. Dieser Artikel ist ein perfektes Beispiel.
In letzter Zeit wurde ich häufig nach der Erstellung einer Benutzeroberflächen-API gefragt, mit der Benutzer (unter anderem) Bilder auf einen Server hochladen und auf der Clientseite der zahlreichen von unserem Unternehmen unterstützten Websites verwendet werden können. Normalerweise ist dies eine sehr einfache Sache: Erstellen Sie ein Formular, fügen Sie ein Eingabefeld für den Dateityp hinzu, lassen Sie den Benutzer ein Bild vom Computer auswählen und legen Sie das Formular enctype="multipart/form-data" in den Formular-Tag-Eigenschaften fest und laden Sie es dann hoch . Ziemlich einfach, nicht wahr? Tatsächlich ist hier ein recht einfaches Beispiel; klicken Sie, um es einzugeben.
Aber was ist, wenn Sie das Bild vor dem Hochladen auf irgendeine Weise vorverarbeiten möchten? Beispielsweise müssen Sie zuerst die Bildgröße komprimieren, oder Sie möchten, dass das Bild nur in bestimmten Formattypen wie PNG oder JPG vorliegt. Was sollten Sie tun?
Verwenden Sie Canvas, um das Problem zu lösen!

Einführung in Canvas
Canvas ist ein neues DOM-Element in HTML5, das es Benutzern ermöglicht, Grafiken direkt auf der Seite zu zeichnen, normalerweise mit JavaScript. Verschiedene Formatstandards sind beispielsweise unterschiedlich. SVG ist beispielsweise eine Raster-API (Raster-API), während VML eine Vektor-API ist. Sie können Adobe Illustrator (Vektor) zum Zeichnen und Adobe Photoshop (Raster) zum Zeichnen verwenden.

Auf der Leinwand können Sie Bilder lesen und rendern und Bilddaten über JavaScript bearbeiten. Es gibt viele vorhandene Artikel, die die grundlegende Bildverarbeitung für Sie demonstrieren und sich hauptsächlich auf verschiedene Bildfiltertechniken konzentrieren. Wir müssen jedoch lediglich das Bild skalieren und in ein bestimmtes Dateiformat konvertieren, und Canvas kann diese Aufgaben vollständig übernehmen.

Unsere angenommenen Anforderungen, z. B. dass die Bildhöhe 100 Pixel nicht überschreitet, unabhängig von der Höhe des Originalbilds. Der Grundcode lautet wie folgt:

// 参数，最大高度 
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; 
};

Im obigen Beispiel können Sie die toDataURL()-Methode von Canvas verwenden, um den Base64-codierten Wert des Bildes zu erhalten (der ebenfalls als hexadezimale Zeichenfolge verstanden werden kann). binärer Datenstrom).
Hinweis: Die von toDataURL() von Canvas erhaltene URL beginnt mit einer Zeichenfolge und enthält 22 nutzlose Daten „data:image/png;base64“, die auf dem Client oder Server gefiltert werden müssen >Solange der Browser dies unterstützt, gibt es grundsätzlich keine Begrenzung der Länge der URL-Adresse, und die Längenbeschränkung von 1024 gilt nur für die ältere IE-Generation.

Entschuldigung, wie bekommen wir die Bilder, die wir brauchen?

Guter Junge, ich freue mich, dass du gefragt hast. Sie können es nicht direkt über das Dateieingabefeld verarbeiten. Alles, was Sie von diesem Dateieingabefeldelement erhalten können, ist nur der Pfad zu der vom Benutzer ausgewählten Datei. Nach herkömmlicher Vorstellung können Sie Bilder über diese Pfadinformationen laden, dies ist jedoch im Browser unrealistisch. (Anmerkung des Übersetzers: Browserhersteller müssen sicherstellen, dass ihre Browser absolut sicher sind, um Marktanteile zu gewinnen und zumindest Medienangriffe zu vermeiden. Wenn dies zulässig ist, können bösartige URLs versuchen, durch Zusammenfügen von Dateipfaden an bestimmte vertrauliche Informationen zu gelangen.) >Um diese Anforderung zu erfüllen, können wir die Datei-API von HTML5 verwenden, um Dateien auf der Festplatte des Benutzers zu lesen und diese Datei als Quelle des Bildes (src, Quelle) zu verwenden

Einführung in die Datei-API

Die neue Datei-API-Schnittstelle ist eine Möglichkeit, Benutzerdateiverzeichnisse zu lesen und aufzulisten, ohne gegen Sicherheits-Sandbox-Regeln zu verstoßen – durch Sandbox-Einschränkungen können bösartige Websites natürlich keine Viren schreiben. Das Dateileseobjekt, das wir verwenden möchten, heißt FileReader. Mit FileReader können Entwickler den Inhalt von Dateien lesen (die Implementierung bestimmter Browser kann sehr unterschiedlich sein).

Angenommen, wir haben den Pfad der Bilddatei erhalten und uns dann auf den vorherigen Code verlassen, wird es einfach, FileReader zum Laden und Rendern des Bildes zu verwenden:

// 加载 图像文件(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+"/"; 
%> 
 
 
 
 
 
 
 
 
 
 
<script> 
// 参数，最大高度 
var MAX_HEIGHT = 100; 
// 渲染 
function render(src){ 
// 创建一个 Image 对象 
var image = new Image(); 
// 绑定 load 事件处理器，加载完成后执行 
image.onload = function(){ 
// 获取 canvas DOM 对象 
var canvas = document.getElementById(&quot;myCanvas&quot;); 
// 如果高度超标 
if(image.height &gt; MAX_HEIGHT) { 
// 宽度等比例缩放 *= 
image.width *= MAX_HEIGHT / image.height; 
image.height = MAX_HEIGHT; 
} 
// 获取 canvas的 2d 环境对象, 
// 可以理解Context是管理员，canvas是房子 
var ctx = canvas.getContext(&quot;2d&quot;); 
// 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(&quot;选择的文件类型不是图片: &quot;, src.type); 
} else { 
window.confirm(&quot;只能选择图片文件&quot;); 
} 
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(&quot;myCanvas&quot;); 
// 获取Base64编码后的图像数据，格式是字符串 
// &quot;data:image/png;base64,&quot;开头,需要在客户端或者服务器端将其去掉，后面的部分可以直接写入文件。 
var dataurl = canvas.toDataURL(&quot;image/png&quot;); 
// 为安全 对URI进行编码 
// data%3Aimage%2Fpng%3Bbase64%2C 开头 
var imagedata = encodeURIComponent(dataurl); 
//var url = $(&quot;#form&quot;).attr(&quot;action&quot;); 
// 1. 如果form表单不好处理,可以使用某个hidden隐藏域来设置请求地址 
// &lt;input type=&quot;hidden&quot; name=&quot;action&quot; value=&quot;receive.jsp&quot; /&gt; 
var url = $(&quot;input[name='action']&quot;).val(); 
// 2. 也可以直接用某个dom对象的属性来获取 
// &lt;input id=&quot;imageaction&quot; type=&quot;hidden&quot; action=&quot;receive.jsp&quot;&gt; 
// var url = $(&quot;#imageaction&quot;).attr(&quot;action&quot;); 
// 因为是string，所以服务器需要对数据进行转码，写文件操作等。 
// 个人约定，所有http参数名字全部小写 
console.log(dataurl); 
//console.log(imagedata); 
var data = { 
imagename: &quot;myImage.png&quot;, 
imagedata: imagedata 
}; 
jQuery.ajax( { 
url : url, 
data : data, 
type : &quot;POST&quot;, 
// 期待的返回值类型 
dataType: &quot;json&quot;, 
complete : function(xhr,result) { 
//console.log(xhr.responseText); 
var $tip2 = $(&quot;#tip2&quot;); 
if(!xhr){ 
$tip2.text('网络连接失败!'); 
return false; 
} 
var text = xhr.responseText; 
if(!text){ 
$tip2.text('网络错误!'); 
return false; 
} 
var json = eval(&quot;(&quot;+text+&quot;)&quot;); 
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(&quot;drop-target&quot;); 
// 阻止 dragover(拖到DOM元素上方) 事件传递 
target.addEventListener(&quot;dragover&quot;, function(e){e.preventDefault();}, true); 
// 拖动并放开鼠标的事件 
target.addEventListener(&quot;drop&quot;, function(e){ 
// 阻止默认事件，以及事件传播 
e.preventDefault(); 
// 调用前面的加载图像 函数，参数为dataTransfer对象的第一个文件 
loadImage(e.dataTransfer.files[0]); 
}, true); 
var setheight = document.getElementById(&quot;setheight&quot;); 
var maxheight = document.getElementById(&quot;maxheight&quot;); 
setheight.addEventListener(&quot;click&quot;, function(e){ 
// 
var value = maxheight.value; 
if(/^\d+$/.test(value)){ 
MAX_HEIGHT = parseInt(value); 
} 
e.preventDefault(); 
},true); 
var btnsend = document.getElementById(&quot;btnsend&quot;); 
btnsend.addEventListener(&quot;click&quot;, function(e){ 
// 
sendImage(); 
},true); 
}; 
window.addEventListener("DOMContentLoaded", function() { 
// 
init(); 
},false); 
</script> 
 
 
 
通过Canvas及File API缩放并上传图片
 
从文件夹拖动一张照片到下方的盒子里， canvas 和 JavaScript将会自动的进行缩放.
 
 
 
设置图片最大高度 
 
 
 
拖动图片文件到这里...
 
 
 
 上 传   
 
 
缩略图：
 
 
 
 
 
 
 

服务端页面，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 %> 
}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

借助toDataURL实现将HTML5 Canvas的内容保存为图片

Das obige ist der detaillierte Inhalt vonSo zoomen und laden Sie Bilder über die Canvas- und Datei-API hoch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!