Canvas と File API を介して画像をズームしてアップロードする方法

この記事では主に、Canvas と File API を介して写真をアップロードする方法を紹介します。必要な友達はそれを参照できるようにします。

シンプルなユーザー インターフェイスを作成して、それを制御できるようにします。 . 画像のサイズ。サーバーにアップロードされたデータは、multi-part/form-data の enctype を処理する必要はありません。単純な POST フォーム ハンドラーだけで十分です。完全なコード例を以下に示します。 アドレスの例: Canvas Resize Demo
原著者: Tom Trenka 博士
原文の日付: 2013 年 8 月 6 日
翻訳日: 2013 年 8 月 8 日

Tom Trenka が「私の」ブログに記事を書くことができます、それは私にとって非常に光栄です。トムは Dojo フレームワークの最初の貢献者の 1 人であり、SitePen での私の指導者でもあり、彼の天才性を最高レベルで目の当たりにしました。彼は常に多くの困難な問題をいち早く予測し、前向きな解決策を示していました。彼は常に外側から考え、型破りだが確かな方法で周辺問題を解決します。この記事はその完璧な例です。
最近、ユーザーが画像を (とりわけ) サーバーにアップロードし、当社がサポートする多数の Web サイトのクライアント側で使用できるようにするユーザー インターフェイス API の作成について多くの質問を受けました。通常、これは非常に簡単です。フォームを作成し、ファイルの種類の入力ボックスを追加し、ユーザーがコンピューターから画像を選択できるようにし、フォーム タグのプロパティで enctype="multipart/form-data" フォームを設定してアップロードします。 。とてもシンプルですね。実際、これは非常に単純な例です。クリックして入力します
しかし、アップロードする前に何らかの方法で画像を前処理したい場合はどうすればよいでしょうか?たとえば、最初に画像サイズを圧縮する必要がある場合、または画像を png や jpg などの特定の種類の形式のみにする必要がある場合、どうすればよいでしょうか。
それを解決するには、canvas を使用してください!

Canvas の概要
canvas は、ユーザーが通常 JavaScript を使用して、ページ上にグラフィックを直接描画できるようにする HTML5 の新しい DOM 要素です (SVG Raster API など)。 VML はベクター API (ベクター API) であり、描画に Adob​​e Illustrator (ベクター描画) を使用する場合と Adob​​e Photoshop (ラスター描画) を使用する場合の違いを考えることができます。

キャンバス上でできることは、画像の読み取りとレンダリングであり、JavaScript を介して画像データを操作できるようになります。主にさまざまな画像フィルタリング技術に焦点を当てて、基本的な画像処理を説明する既存の記事が多数ありますが、必要なのは画像を拡大縮小して特定のファイル形式に変換することだけであり、Canvas はこれらの作業を完全に行うことができます。

元の画像の高さがどんなに高くても、画像の高さが100ピクセルを超えないなどの想定要件。基本的なコードは次のとおりです:

// 参数，最大高度 
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 は文字列で始まり、「data:image/png;base64」という無駄なデータが 22 個あります。これは原則としてクライアントまたはサーバーでフィルタリングする必要があります。ブラウザがサポートしているため、URL アドレスの長さに制限はありませんが、1024 という長さの制限は、旧世代の IE に固有のものです。

すみません、必要な画像を入手するにはどうすればよいですか?

いい子、質問してよかったです。ファイル入力ボックスを介して直接処理することはできません。このファイル入力ボックス要素から取得できるのは、ユーザーが選択したファイルへのパスのみです。従来の想像によれば、このパス パス情報を通じて画像を読み込むことができますが、これはブラウザーでは非現実的です。 (翻訳者注: ブラウザのメーカーは、市場シェアを獲得し、少なくともメディア攻撃を回避するために、ブラウザが絶対に安全であることを保証する必要があります。これが許可されると、悪意のある URL がファイル パスをつなぎ合わせて特定の機密情報を取得しようとする可能性があります。)この要件を達成するには、HTML5 のファイル API を使用してユーザーのディスク上のファイルを読み取り、このファイルを画像のソース (src、source) として使用できます。

ファイル API の概要

新しいファイル API。インターフェイスは、セキュリティ サンドボックス ルールに違反することなくユーザー ファイル ディレクトリを読み取って一覧表示する方法です。サンドボックスの制限により、悪意のある Web サイトはユーザーのディスクにウイルスを書き込むことができず、もちろんウイルスを実行することもできません。 使用したいファイル読み取りオブジェクトは FileReader と呼ばれます。FileReader を使用すると、開発者はファイルの内容を読み取ることができます (特定のブラウザーの実装は大きく異なる場合があります)。

画像ファイルのパスを取得したと仮定すると、前のコードに依存して、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+"/"; 
%> 
 
 
 
 
 
 
 
 
 
 
<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的内容保存为图片

以上がCanvas と File API を介して画像をズームしてアップロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。