javascript - 플러그인을 사용하지 않고 캔버스를 사용하여 div의 콘텐츠를 이미지로 변환하는 방법입니다.
巴扎黑2017-05-24 11:36:16
0
3
890
인터넷에서 캔버스 사용에 대해 많은 분들이 언급하셨는데, 핵심 내용 변환 부분은 대부분 플러그인의 도움을 받는 것 같고, 제가 찾은 유일한 플러그인에 의존하지 않는 예제는 잘못 실행되었습니다. 플러그인을 사용하지 않고 p에 있는 내용을 그림으로 변환하는 방법을 마스터님께 여쭤보고 싶습니다~~
플러그인을 못쓰는건 아니지만, 플러그인 구현시 내부적으로 어떤 원칙이 사용되는지 아시나요? 일반적인 원리와 논리를 이해하고 있나요? 플러그인은 구현 방법이 아닙니다! 플러그인은 하나의 솔루션일 뿐입니다! 어쩌면 직접 작성하실 수도 있고, 구현 방법은 플러그인과 동일합니다!
다시 질문으로 돌아가서, p를 그림으로 변환하는 것이 가능합니까? 작업량이 무엇입니까? 타당성 측면에서 구현 가능한 플러그인이 있다는 것은 기존 프론트엔드 분야에서도 실현 가능하다는 뜻이다. 구현 원칙은 무엇입니까?
가장 먼저 생각해야 할 것은 프런트 엔드 코드가 브라우저에서 실행된다는 것입니다. 글쎄, 우리가 가장 먼저 생각해야 할 것은 브라우저가 이런 종류의 API를 직접 제공하는가 하는 것입니다. 브라우저 API는 무엇을 찾고 있나요? BOM DOM 문서를 찾으세요. 내가 아는 한, Firefox는 특정 요소의 배경으로 특정 노드를 사용할 수 있는 것으로 보이며 CSS에서 background: -moz-element() 구문을 발명했으며 스크린샷과 유사한 API는 없습니다.
캔버스도 언급하셨는데요. 개발자로서 호기심을 유지하는 것이 가장 좋습니다. 이러한 종류의 플러그인을 구현하는 방법을 매우 간략하게 이해할 수 있습니다. 이 기능을 수행하는 방법에 대한 모든 세부 사항을 알 필요는 없지만 이 구현 원칙이 작동하는 이유는 알아야 합니다.
좋아요, 캔버스에 p를 그리는 방법은 무엇인가요? 캔버스는 픽셀을 처리하는 기능을 제공하며 이론적으로는 무엇이든 그릴 수 있습니다. 플러그인이 수행하는 작업은 p와 p의 스타일을 읽고 캔버스에 p를 그린 다음 p의 하위 노드를 반복하는 것입니다. 알았어, 이 일이 쉽나요? 확실히 간단하지 않습니다! 맨손으로 바퀴를 만들 수 있는 신은 누구일까요? 그렇다면 이 질문에 답하기 위해 당신이 만든 바퀴를 붙이시겠습니까? 어느 위대한 신이 당신에게 가르칠 수 있습니까?
당신과 마스터의 차이점은 마스터가 html2canvas를 자유롭게 작성할 수 있다는 것이 아니라 문제가 발생했을 때 마스터가 명확하게 분석할 수 있다는 것입니다.
먼저 스크린샷을 찍은 다음 입력에 붙여넣어 입력 붙여넣기 paste 이벤트를 바인딩할 수 있습니다paste 事件 然后 event.clipboardData.items 用 var img = new Image() 读出来 最后放在 canvas 里面 用context.dramImage(img,0,0) var url = context.toDataURL('image/png') 这不就是一个图片了吗 最后用 const a = document.createElement('a')a.setAttribute('download',true)a.setAttribute('href',url)a.click()그런 다음 var img = new Image()를 사용하여 event.clipboardData.items를 읽어옵니다.
마지막으로 canvas에 배치된 것은 context.dramImage(img,0,0) var url = context.toDataURL('image/png')를 사용합니다. 🎜이거 그냥 그림 아닌가요?🎜마지막으로 const a = 문서 .createElement('a')a.setAttribute('download',true)a.setAttribute('href',url)a.click() 하면 이미지가 다운로드됩니다:)🎜
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
플러그인을 못쓰는건 아니지만, 플러그인 구현시 내부적으로 어떤 원칙이 사용되는지 아시나요? 일반적인 원리와 논리를 이해하고 있나요? 플러그인은 구현 방법이 아닙니다! 플러그인은 하나의 솔루션일 뿐입니다! 어쩌면 직접 작성하실 수도 있고, 구현 방법은 플러그인과 동일합니다!
다시 질문으로 돌아가서, p를 그림으로 변환하는 것이 가능합니까? 작업량이 무엇입니까? 타당성 측면에서 구현 가능한 플러그인이 있다는 것은 기존 프론트엔드 분야에서도 실현 가능하다는 뜻이다. 구현 원칙은 무엇입니까?
가장 먼저 생각해야 할 것은 프런트 엔드 코드가 브라우저에서 실행된다는 것입니다. 글쎄, 우리가 가장 먼저 생각해야 할 것은 브라우저가 이런 종류의 API를 직접 제공하는가 하는 것입니다. 브라우저 API는 무엇을 찾고 있나요? BOM DOM 문서를 찾으세요. 내가 아는 한, Firefox는 특정 요소의 배경으로 특정 노드를 사용할 수 있는 것으로 보이며 CSS에서 background: -moz-element() 구문을 발명했으며 스크린샷과 유사한 API는 없습니다.
캔버스도 언급하셨는데요. 개발자로서 호기심을 유지하는 것이 가장 좋습니다. 이러한 종류의 플러그인을 구현하는 방법을 매우 간략하게 이해할 수 있습니다. 이 기능을 수행하는 방법에 대한 모든 세부 사항을 알 필요는 없지만 이 구현 원칙이 작동하는 이유는 알아야 합니다.
좋아요, 캔버스에 p를 그리는 방법은 무엇인가요? 캔버스는 픽셀을 처리하는 기능을 제공하며 이론적으로는 무엇이든 그릴 수 있습니다. 플러그인이 수행하는 작업은 p와 p의 스타일을 읽고 캔버스에 p를 그린 다음 p의 하위 노드를 반복하는 것입니다. 알았어, 이 일이 쉽나요? 확실히 간단하지 않습니다! 맨손으로 바퀴를 만들 수 있는 신은 누구일까요? 그렇다면 이 질문에 답하기 위해 당신이 만든 바퀴를 붙이시겠습니까? 어느 위대한 신이 당신에게 가르칠 수 있습니까?
당신과 마스터의 차이점은 마스터가 html2canvas를 자유롭게 작성할 수 있다는 것이 아니라 문제가 발생했을 때 마스터가 명확하게 분석할 수 있다는 것입니다.
물론 저는 마스터가 아닙니다. 이런 문제를 보면 불평을 할 수 밖에 없습니다.
먼저 p를 svg로 변환한 다음 svg를 canvas로 변환해야 하지만 주의해야 할 몇 가지 사항이 있습니다.
1. html을 svg로 변환할 때 입력과 같은 제어 요소가 있을 수 없다는 점에 유의하세요. 그렇지 않으면 변환이 실패합니다.
2. html을 svg로 변환하는 과정에서 svg로 변환하기 전에 html 요소의 모든 스타일을 순회하여 인라인 스타일로 변환해야 합니다. 그렇지 않으면 공백이 나타날 수 있습니다.사실 말씀하신 필요성이 바로 이것이네요. 모퉁이를 돌면 됩니다
마지막으로먼저 스크린샷을 찍은 다음 입력에 붙여넣어 입력 붙여넣기
paste이벤트를 바인딩할 수 있습니다paste事件然后 event.clipboardData.items 用 var img = new Image() 读出来
最后放在
canvas里面 用context.dramImage(img,0,0) var url = context.toDataURL('image/png')这不就是一个图片了吗
最后用
const a = document.createElement('a')a.setAttribute('download',true)a.setAttribute('href',url)a.click()그런 다음 var img = new Image()를 사용하여 event.clipboardData.items를 읽어옵니다.canvas에 배치된 것은 context.dramImage(img,0,0) var url = context.toDataURL('image/png')를 사용합니다. 🎜이거 그냥 그림 아닌가요?🎜마지막으로const a = 문서 .createElement('a')a.setAttribute('download',true)a.setAttribute('href',url)a.click()하면 이미지가 다운로드됩니다:)🎜