Comment zoomer et télécharger des images via l'API Canvas et File

Cet article explique principalement comment zoomer et télécharger des images via l'API Canvas et File. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Créer un utilisateur uniquement. prend soin de l'interface et vous permet de contrôler la taille de l'image. Les données téléchargées sur le serveur n'ont pas besoin de gérer la situation où le type d'enc est constitué de plusieurs parties/données de formulaire. Un simple gestionnaire de formulaire POST suffit. L'exemple de code complet est joint ci-dessous. Exemple d'adresse : Canvas Resize Demo
Auteur original : Dr Tom Trenka
Date originale : 6 août 2013
Date de traduction : 8 août 2013

Tom Trenka peut écrire un article pour " mon" blog est pour moi un immense honneur. Tom a été l'un des premiers contributeurs au framework Dojo et a été mon mentor chez SitePen. J'ai été témoin de son génie au plus haut niveau, et il a toujours été le premier à prévoir de nombreux problèmes difficiles avec des solutions tournées vers l'avenir. Il pense toujours de l'extérieur et résout les problèmes marginaux de manière non conventionnelle mais solide. Cet article en est un parfait exemple.
Dernièrement, on m'a beaucoup demandé comment créer une API d'interface utilisateur qui permettrait aux utilisateurs de télécharger des images sur un serveur (entre autres choses) et d'être utilisée côté client du grand nombre de sites Web pris en charge par notre société. Habituellement, c'est une chose très simple : créez un formulaire, ajoutez une zone de saisie de type de fichier, laissez l'utilisateur sélectionner une image sur l'ordinateur et définissez le formulaire enctype="multipart/form-data" sur les propriétés de la balise de formulaire, puis téléchargez-le. . Assez simple, n'est-ce pas ? En fait, voici un exemple assez simple : cliquez pour entrer
Mais que se passe-t-il si vous souhaitez prétraiter l'image d'une manière ou d'une autre avant de la télécharger ? Par exemple, vous devez d'abord compresser la taille de l'image, ou vous avez besoin que l'image soit uniquement dans certains types de formats, tels que png ou jpg, que devez-vous faire ?
Utilisez Canvas pour le résoudre !

Introduction à Canvas
Canvas est un nouvel élément DOM en HTML5 qui permet aux utilisateurs de dessiner des graphiques directement sur la page, généralement en utilisant JavaScript. Les différentes normes de format sont également différentes. Par exemple, SVG est une API raster (API raster) tandis que VML est une API vectorielle. Vous pouvez envisager d'utiliser Adobe Illustrator (vecteur) pour le dessin et Adobe Photoshop (raster) pour le dessin.

Ce que vous pouvez faire sur Canvas, c'est lire et restituer des images, et vous permettre de manipuler les données d'image via JavaScript. Il existe de nombreux articles qui présentent pour vous le traitement d'image de base - en se concentrant principalement sur diverses techniques de filtrage d'image - mais tout ce dont nous avons besoin est de redimensionner l'image et de la convertir dans un format de fichier spécifique, et Canvas peut faire ces choses complètement.

Nos exigences supposées, telles que la hauteur de l'image ne dépassant pas 100 pixels, quelle que soit la hauteur de l'image originale. Le code de base est le suivant :

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

Dans l'exemple ci-dessus, vous pouvez utiliser la méthode toDataURL() de canvas pour obtenir la valeur codée en Base64 de l'image (qui peut être comprise de la même manière comme une chaîne hexadécimale , ou flux de données binaires).
Remarque : L'URL obtenue par toDataURL() de Canvas commence par une chaîne et contient 22 données inutiles "data:image/png;base64", qui doivent être filtrées sur le client ou le serveur.
En principe, tant que le navigateur le prend en charge, il n'y a aucune limite sur la longueur de l'adresse URL, et la limite de longueur de 1024 est unique à l'ancienne génération d'IE.

Excusez-moi, comment obtenir les images dont nous avons besoin ?
Bon garçon, je suis content que tu aies demandé. Vous ne pouvez pas le traiter directement via la zone de saisie du fichier. Tout ce que vous pouvez obtenir de cet élément de la zone de saisie du fichier est uniquement le chemin d'accès au fichier sélectionné par l'utilisateur. Selon l'imagination conventionnelle, vous pouvez charger des images via ces informations de chemin, mais cela est irréaliste dans le navigateur. (Note du traducteur : les fabricants de navigateurs doivent s'assurer que leurs navigateurs sont absolument sécurisés afin de gagner des parts de marché et au moins d'éviter les attaques médiatiques. Si cela est autorisé, des URL malveillantes peuvent tenter d'obtenir certaines informations sensibles en regroupant les chemins de fichiers Afin de répondre à cette exigence, nous pouvons utiliser l'API File de HTML5 pour lire les fichiers sur le disque de l'utilisateur et utiliser ce fichier comme source de l'image (src, source

Introduction à l'API File La nouvelle interface File API est un moyen de lire et de répertorier les répertoires de fichiers utilisateur sans enfreindre les règles de sécurité du bac à sable - grâce aux restrictions du bac à sable, les sites Web malveillants ne peuvent pas écrire de virus sur les disques utilisateur, bien sûr, ils ne peuvent pas être exécutés. L'objet de lecture de fichiers que nous souhaitons utiliser s'appelle FileReader. FileReader permet aux développeurs de lire le contenu des fichiers (l'implémentation de navigateurs spécifiques peut être très différente).

En supposant que l'on ait obtenu le chemin du fichier image, puis en s'appuyant sur le code précédent, il devient facile d'utiliser FileReader pour charger et restituer l'image :

// 加载 图像文件(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的内容保存为图片

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!