oCanvas.js를 사용하여 투명한 배경 이미지를 렌더링하는 방법

Question

oCanvas.js로 앱을 디자인했습니다. 이미지를 만들고 조작 할 수있는 앱을 훨씬 더 쉽게 만들 수있는 정말 멋진 캔버스 라이브러리이지만 이미지 필터를 구현하려고 할 때 걸렸습니다.

내가 가질 수 있도록 투명 배경이 필요합니다. 각 레이어는 자체 표시 객체로 표현되며 숨겨진 "준비"캔버스에서 개별적으로 (한 번에 하나씩) 렌더링됩니다. 렌더링 된 직후 레이어는 보이는 캔버스의 이전 레이어 위에 그려 지므로 렌더링하는 동안 서로 다른 이미지 필터를 각 레이어에 독립적으로 적용 할 수 있습니다.

내가 겪고있는 문제는 oCanvas 객체의 canvasElement에서 이미지를 추출 할 때 결과 이미지의 배경이 투명하지 않다는 것입니다. 예 : oCanvas.create()가 처리되었지만 display : none이있는 50x50 캔버스가 있다고 가정 해보십시오. (이것은 렌더링 캔버스로 사용됨) 및 oCanvas 인스턴스가없는 다른 캔버스 (동일한 치수)로 구성됩니다.

visibleCanvas.getContext("2d").drawImage(MyOcanvasCore.canvasElement, 0, 0); 

가 나는 또한 URL = MyOcanvasCore.canvasElement.toDataURL()를 사용하여 시도하고 내 visibleCanvas이 src=url와의 drawImage을 가진 :이 (의사 코드) 그런 짓을하려합니다.

이미지는 항상 전송되지만 캔버스.create()에서 background : "transparent"를 지정하더라도 흰색 배경이 있습니다. 따라서 이전의 모든 레이어를 완전히 덮어 씁니다.

나를위한 조언이 있으십니까? 내가 잘못하고 있니? 나는 하나의 캔버스에서 다른 것들로 classic drawRect, drawImage 등의 메소드를 사용하여 다른 것들을 전송하려고 시도했으며 투명성이 유지되었습니다. 그것이 내가 도서관 또는 제 코드 중 하나라고 믿는 이유입니다.

Answer 1

나는 png 이외의 이미지 형식을 사용하고 있다고 생각합니다. 픽셀의 투명도를 포함하여 픽셀 을 포함하여 압축 된 형식이 아닌 PNG의 이미지 형식을 유지해야합니다. 이미지 편집기에서 이미지를 편집 한 다음 png 결과를 .png 형식으로 저장 한 다음 이미지를 png 형식으로 유지하십시오.