img을 canvas에 그려야합니다. 그러나 스타일이 CSS에서 style 속성을 설정했는지 또는 CSS에서 수행하는지에 관계없이 이월되지 않습니다. 여기 내가 수행하려고 시도하고있는 것을 보여주는 JSFiddle입니다.DrawImage에 CSS 스타일이 표시되지 않습니다.
나는 또한 canvas에 스타일을 적용 해 보았습니다. 이것은 올바르게 표시되지만 canvas.toDataURL(...)을 수행하면 스타일이 적용되지 않습니다.
생성 된 데이터에 스타일을 적용하는 다른 방법이 있습니까?
캔버스 콘텐츠에 필터를 적용하려면 CSS filter 속성과 동일한 구문을 사용하는 최첨단 filter property을 사용할 수 있습니다. 당신이 당신의 이미지를 그리기 전에,
context.filter = "grayscale(1)";
을 그리고 당신은 제대로 필터링 남아
context.filter = "none";
필터링 된 이미지로 앞으로 어떻게 다른 용도로 재설정 할 수 있습니다 - filter 속성은 기본적으로 알려줍니다 캔버스 컨텍스트에서 "지금부터 그리는 것은이 필터를 적용해야합니다."따라서 변경 사항은 향후 그리기 작업에만 영향을 미칩니다.
감사합니다. 나는 여전히 CSS 스타일이 자동으로 적용되는 것이 더 좋을 것이라고 생각하지만, 다행스럽게도 이것이 내가이 특별한 경우에 원했던 것과 정확히 일치한다. – RareNCool
필터 지원이 제한됩니다. 이러한 유형의 기능을 원격 설치하려면 브라우저 호환성을 확인하십시오. – Blindman67
적용 할 스타일에 따라 다릅니다. CSS 너비와 높이, CSS 필터, 3D 변환 등 많은 노력이 필요합니다. – Blindman67
@ Blindman67 필터는 필자와 똑같습니다. 나는 3D 변환을 신경 쓰지 않는다. – RareNCool
[이 삭제 된 질문] (http://stackoverflow.com/q/42095361/) [K3N] (http://stackoverflow.com/users/1693593/k3n)의 의견을 인용 해 보겠습니다. 컨텍스트 자체에 새로운 [filter property] (https://devdocs.io/dom/canvasrenderingcontext2d/filter)를 사용하십시오. 거기에 동일한 CSS 필터를 사용하면 이미지 데이터 자체에 적용됩니다. 이미지가로드되었는지 확인하십시오 CORS를 수행하지 않으면 추출이 실패합니다. 이전 브라우저 나 지원이없는 브라우저에서는 해당 필터를 모방해야합니다 .CSS 필터 사양에는 다양한 필터에 대한 영수증이 있습니다. " – apsillers