Canvas 및 File API를 통해 이미지를 확대/축소하고 업로드하는 방법

이 글에서는 Canvas와 File API를 통해 사진을 확대/축소하는 방법을 주로 소개합니다. 이제 특정 참고 가치가 있습니다. 필요한 친구들이 참고할 수 있습니다.

간단한 사용자 인터페이스를 만들어 제어할 수 있습니다. .이미지의 크기입니다. 서버에 업로드된 데이터는 enctype이 multi-part/form-data인 상황을 처리할 필요가 없습니다. 간단한 POST 양식 핸들러만으로 충분합니다. 아래에 전체 코드 예제가 첨부되어 있습니다. 예시 주소: Canvas Resize Demo
원작자: Tom Trenka 박사
원본 날짜: 2013년 8월 6일
번역 날짜: 2013년 8월 8일

Tom Trenka가 "내" 블로그에 글을 쓸 수 있게 되었습니다. 제게는 큰 영광입니다. . Tom은 Dojo 프레임워크의 최초 기여자 중 한 명이었고 SitePen에서 나의 멘토였습니다. 나는 그의 천재성을 최고 수준에서 목격했으며 그는 항상 미래 지향적인 솔루션으로 많은 어려운 문제를 예견했습니다. 그는 항상 외부에서 생각하고, 틀에 얽매이지 않지만 탄탄한 방식으로 주변 문제를 해결합니다. 이 기사는 완벽한 예입니다.
최근 저는 사용자가 서버에 이미지를 업로드하고 우리 회사가 지원하는 수많은 웹사이트의 클라이언트 측에서 사용할 수 있는 사용자 인터페이스 API를 만드는 것에 대해 많은 요청을 받았습니다. 일반적으로 이것은 매우 쉬운 일입니다. 양식을 만들고, 파일 형식 입력 상자를 추가하고, 사용자가 컴퓨터에서 이미지를 선택하도록 하고, 양식 태그 속성에서 enctype="multipart/form-data" 양식을 설정한 다음 업로드합니다. . 꽤 간단하지 않나요? 실제로 여기에 충분히 간단한 예가 있습니다. 클릭하여 입력하세요.
하지만 이미지를 업로드하기 전에 어떤 방식으로든 사전 처리하고 싶다면 어떻게 해야 할까요? 예를 들어, 먼저 이미지 크기를 압축해야 합니다. 아니면 이미지가 png 또는 jpg와 같은 특정 유형의 형식으로만 필요하면 어떻게 해야 합니까?
캔버스를 사용하여 해결하세요!

캔버스 소개
캔버스는 사용자가 페이지에 직접 그래픽을 그릴 수 있게 해주는 HTML5의 새로운 DOM 요소로, 일반적으로 SVG Raster API와 같은 다양한 형식 표준도 다릅니다. (래스터 API)와 VML은 벡터 API(벡터 드로잉)를 사용하여 그리는 것과 Adobe 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; 
};

위의 예에서는 캔버스의 toDataURL() 메서드를 사용하여 이미지의 Base64 인코딩 값을 얻을 수 있습니다(16진수 문자열 또는 이진 데이터 스트림으로 유사하게 이해될 수 있음).
참고: 캔버스의 toDataURL()로 얻은 URL은 문자열로 시작하며 클라이언트나 서버에서 필터링해야 하는 22개의 쓸모 없는 데이터 "data:image/png;base64"가 있습니다.
원칙적으로. 브라우저에서 지원하므로 URL 주소의 길이에는 제한이 없지만 1024의 길이 제한은 이전 세대 IE에만 ​​적용됩니다.

실례합니다. 필요한 이미지를 어떻게 구하나요?
착한 소년님, 물어봐주셔서 기뻐요. 파일 입력 상자를 통해 직접 처리할 수는 없습니다. 이 파일 입력 상자 요소에서 얻을 수 있는 것은 사용자가 선택한 파일의 경로뿐입니다. 기존의 상상에 따르면 이 경로 경로 정보를 통해 이미지를 로드할 수 있지만 브라우저에서는 이는 비현실적입니다. (번역자 참고 사항: 브라우저 제조업체는 시장 점유율을 확보하고 최소한 미디어 공격을 피하기 위해 브라우저가 절대적으로 안전한지 확인해야 합니다. 이것이 허용되는 경우 악성 URL은 파일 경로를 연결하여 민감한 특정 정보를 얻으려고 시도할 수 있습니다.) 이 요구 사항을 충족하기 위해 HTML5의 File API를 사용하여 사용자 디스크의 파일을 읽고 이 파일을 이미지 소스(src, source)로 사용할 수 있습니다.

File API 소개 새로운 파일 API. 인터페이스는 보안 샌드박스 규칙을 위반하지 않고 사용자 파일 디렉터리를 읽고 나열하는 방식입니다. 샌드박스 제한을 통해 악성 웹 사이트는 사용자 디스크에 바이러스를 쓸 수 없으며 물론 이를 실행할 수도 없습니다.
우리가 사용하려는 파일 읽기 개체는 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> 
var url = $("input[name='action']").val(); 
// 2. 也可以直接用某个dom对象的属性来获取 
// <input> 
// 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表单处理程序就可以了.
好了，下面附上完整的代码示例： 

 
 
nbsp;html> 
 
 
<title>通过Canvas及File API缩放并上传图片</title> 
<meta> 
<meta> 
<meta> 
<meta> 
<meta> 
<script></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=&#39;action&#39;]").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(&#39;网络连接失败!&#39;); 
return false; 
} 
var text = xhr.responseText; 
if(!text){ 
$tip2.text(&#39;网络错误!&#39;); 
return false; 
} 
var json = eval("("+text+")"); 
if(!json){ 
$tip2.text(&#39;解析错误!&#39;); 
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> 
 
 
<p> 
</p><h1 id="通过Canvas及File-API缩放并上传图片">通过Canvas及File API缩放并上传图片</h1> 
<p>从文件夹拖动一张照片到下方的盒子里， canvas 和 JavaScript将会自动的进行缩放.</p> 
<p> 
<input> 
<button>设置图片最大高度</button> 
<input> 
</p> 
<p> 
</p><p>拖动图片文件到这里...</p> 
<p> 
</p><p> 
<button> 上 传 </button> <span></span> 
</p> 
 
<p></p><h4 id="缩略图">缩略图：</h4> 
<p> 
<canvas></canvas> 
</p> 
 
 
 

服务端页面，receive.jsp 

 
 
 
 
 
 
 
 
{ 
"message": "", 
"success":  
}

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

相关推荐：

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

위 내용은 Canvas 및 File API를 통해 이미지를 확대/축소하고 업로드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!