일반적으로 이미지 업로드를 처리 할 때 일반적인 논리는 소스 이미지를 서버 측에 업로드 한 다음 서버 측 언어가 스케일링 작업을 수행하는 것입니다.
이 모드는 일반적으로 대부분의 요구를 충족시킬 수 있지만, 필요한 이미지가 지정된 크기의 소스 이미지의 썸네일 일 때이 모드를 사용하면 서버 리소스와 대역폭을 낭비하는 방법이됩니다. 따라서 브라우저에서 작은 이미지를 생성 한 다음 업로드하는 것을 고려합니다.
// 다음은 소스 코드입니다
코드 사본은 다음과 같습니다.
함수 DrawCanvasImage (obj, 너비, 콜백) {
var $ canvas = $ ( '<canvas> </canvas>'),
캔버스 = $ 캔버스 [0],
context = canvas.getContext ( '2d');
var img = new Image ();
img.onload = function () {
if (너비) {
if (width> img.width) {
var target_w = img.width;
var target_h = img.height;
}또 다른{
var target_w = 너비;
var target_h = parseint (target_w/img.width*img.height);
}
}또 다른{
var target_w = img.width;
var target_h = img.height;
}
$ canvas [0] .width = target_w;
$ canvas [0] .height = target_h;
Context.DrawImage (IMG, 0,0, Target_W, Target_H);
_canvas = canvas.todataurl ();
/*console.log(_canvas) ;*/
콜백 (obj, _canvas);
}
img.src = getfullpath (obj);
}
기능 getfullpath (obj)
{
if (obj)
{
//즉
if (window.navigator.useragent.indexof ( "msie")> = 1)
{
obj.select ();
return document.selection.createrange () 텍스트;
}
// Firefox
else if (winde
{
if (obj.files && window.url.createobjecturl)
{
return schooel.url.createobjecturl (obj.files [0]);
}
return obj.value;
} else if ($. browser.safari) {
if (window.webkiturl.createobjecturl && obj.files) {
Return Wind
}
return obj.value;
}
return obj.value;
}
}
GetFullPath 함수는 선택한 이미지의 주소를 얻는 것입니다.
_canvas는 Base64에 인코딩 된 이미지 인코딩을 가져 와서 백엔드로 전송하여 파일에 쓸 수 있습니다.