Node.js는 썸네일을 생성한 다음 이를 업로드하고 canvas_javascript 기술을 사용하여 다시 그립니다.

일반적으로 이미지 업로드를 처리할 때 일반적인 논리는 소스 이미지를 서버에 업로드한 다음 서버 측 언어를 사용하여 크기 조정 작업을 수행하는 것입니다.

이 모드는 일반적으로 대부분의 요구 사항을 충족할 수 있지만 필요한 이미지가 지정된 크기를 충족하는 소스 이미지의 썸네일일 경우 이 모드를 사용하는 것은 서버 리소스와 대역폭을 낭비하게 됩니다. 따라서 업로드하기 전에 브라우저 측에서 작은 이미지를 생성하는 것을 고려합니다.

//소스코드는 다음과 같습니다

코드를 복사하세요 코드는 다음과 같습니다

function drawCanvasImage(obj,width, callback){

var $canvas = $(''),
canvas = $canvas[0 ],
context = canvas.getContext('2d');

var img = new Image()

img.onload = function(){
if(width ){
if (width > img.width){
var target_w = img.width;
var target_h = img.height; 🎜>var target_h =parseInt(target_w/img.width*img.height);
}
}else{
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);*/
callback(obj,_canvas)
}
img.src = getFullPath( obj)

}

function getFullPath(obj)
{
if(obj)
{
//ie
if(window.navigator .userAgent.indexOf(" MSIE")>=1)
{
obj.select()
return document.selection.createRange().text; firefox
else if (window.navigator.userAgent.indexOf("Firefox")>=1 || $.browser.opera || $.browser.mozilla)
{
if(obj.files && window.URL.createObjectURL )
{
return window.URL.createObjectURL(obj.files[0])
}
return obj.value
}else if($. browser.safari){
if(window.webkitURL.createObjectURL && obj.files){
return window.webkitURL.createObjectURL(obj.files[0])
}
return obj.value ;
}
return obj.value;
}
}


getFullPath 함수는 선택한 사진의 주소를 가져오는 것입니다.

_canvas는 백엔드로 전송되어 파일에 기록될 수 있는 base64로 인코딩된 이미지 인코딩을 얻습니다.