PNG 프레임이 오버플로되는 것을 방지하려면 어떻게해야합니까?

Question

개체가 있습니다. 그 중 하나는 PNG 형식의 이미지 프레임이고 다른 하나는 JPG 형식의 이미지입니다.

내가 PNG 형식의 프레임에 JPG 형식의 이미지를 드래그

는 (jQuery's drag and drop function) 내 JPG 형식의 이미지 PNG 형식의 프레임을 통해 오버 플로우. 내 JPG 이미지를 내 PNG 프레임을 통해 넘치고 싶지 않습니다. 어떻게 그것을 극복 할 수 있습니까?

내가 HTML5 캔버스를 가정하면 쉽게 내 문제를 이해하게 될 것 이미지 ..

Answer 1

을 업로드하고있어이 허용됩니다 : -

• 스크립트에 새 캔버스를 만들고 얻을 2D 문맥.
• 당신의 JPG 이미지 컨텍스트에 drawImage.
• 프레임에 대한 두 번째 캔버스를 만들고 2D 컨텍스트를 가져옵니다.
• drawImage이 두 번째 캔버스에 PNG.
• 두 컨텍스트에서 getImageData를 호출하여 RGBA 순서로 두 바이트 배열을 가져옵니다.
• 두 번째 캔버스의 알파를 확인하고 필요에 따라 RGB를 결합하여 각 픽셀을 처리합니다.
• 결과를 컨텍스트에 다시 저장하려면 putImageData를 호출하십시오.
• 다른 스크립트에서 작성한 캔버스를 drawImage하거나 canvas.toDataURL ("image/png")을 사용하여 src URL을 얻을 수 있습니다.

Answer 2

CSS Masks에 대한 최첨단 지원뿐만 아니라 잘 지원되는 캔버스 및 SVG 솔루션이 있습니다.