클라이언트 측에서 이미지 회전

Question

사용자가 이미지를 업로드 한 다음 확대/축소하고 자르기와 같은 이미지를 조작 할 수있는 응용 프로그램을 만들고 있습니다. 내가하려는 것은 높이가 이미지를 90도 회전하려는 이미지보다 큰 경우 사용자가 이미지를 업로드 할 때입니다. 나는 css3을 사용하거나 jquery를 사용하여 얻을 수 있다는 것을 알고있다. 실제로 이미지를 회전시키는 방법이 있나요? 프레젠테이션이 아니라 클라이언트 측에서 이미지 자체를 변경하는 것입니다. 서버에 왕복을 추가하여 로딩 시간을 늘리는 것과 같이 이미지 매직 또는 다른 라이브러리를 사용하기 위해 파일을 서버로 보내지 않습니다.

그리고 그것에 대한 의견이 있으십니까?

Answer 1

클라이언트 측에서 이미지를 변환하려면 HTML5 canvas을 사용해야하지만 상대적으로 새로운 브라우저 만 지원합니다.

캔버스 내부에 drawImg()을 사용하여 이미지를 가져와 원하는대로 변형하고 캔버스를 이미지 데이터로 변환하고 업로드해야합니다.

// Create an empty canvas element 
var canvas = document.createElement("canvas"); 
canvas.width = img.width; 
canvas.height = img.height; 

// Copy the image contents to the canvas 
var ctx = canvas.getContext("2d"); 
ctx.drawImage(img, 0, 0); 
// Rotate, zoom and crop the image inside the canvas... 

// Get the data-URL formatted image. 
// This is what you upload to the server and parse as image. 
var dataURL = canvas.toDataURL("image/png"); 

// Upload the image 
$.ajax({ 
    type: "POST", 
    url: "/save_image", 
    data: { 
    img: dataURL 
    } 
} 

는 서버에있는 이미지를 디코딩하고 PHP를 사용하는 경우 this처럼 뭔가를 저장합니다.

Guillotine을 사용하면 브라우저 또는 서버에서 이미지를 자르거나 확대/축소/회전하는 데 필요한 데이터를 사용자가 얻을 수 있습니다 (demo).

이 정보가 도움이되기를 바랍니다.