자바 스크립트에서 이미지를 자르는 방법

Question

이미지가 있는데 모서리에서 빈 테두리를 제거하고 싶습니다. 자바에서 이미지를 트리밍 할 수 있습니까? 거대한 도서관이 더 좋을 것입니다. 아이디어가 있으십니까?

Answer 1

"CanvasRenderingContext2D"개체 (캔버스 요소) 덕분에 이미지로 원하는 것을 할 수 있습니다. 그냥 캔버스의 크기를 조정하고의 drawImage() 메소드를 사용

function trimImage(img, posX, posY, recWidth, recHeight) 
{ 
    var canvas = document.createElement('canvas'); 
    canvas.width = recWidth; 
    canvas.height = recHeight; 
    var context = canvas.getContext('2d'); 
    context.drawImage(img, -posX, -posY); 
    img.parentNode.replaceChild(canvas, img); 
} 
window.addEventListener("DOMContentLoaded", function() 
{ 
    var img = document.createElement('img'); 
    img.src = "image.png"; 
    document.body.appendChild(img); 
    img.onload = function() { trimImage(img, 10, 5, img.width - 40, img.height - 80); } 
}); 

캔버스 요소 는 이미지입니다. 이미지 태그가 필요한 경우 toDataURL()을 사용하여 이미지 태그를 다시 전환하여 src 속성을 가져올 수 있습니다.

은 onload 이벤트를 refire하기 위해, 나는 새로운 이미지가 필요하다고 생각

var newImg = document.createElement('img'); 
newImg.src = canvas.toDataURL(); 
img.parentNode.replaceChild(newImg, img); 

와

img.parentNode.replaceChild(canvas, img); 

를 교체합니다.