8.15: Drag and Drop a File – p5.js Tutorial

이 비디오에서 나는 웹 브라우저의 기능과 당신이 할 수있는 것을 보았습니다 자바 스크립트에서 일반적으로 할뿐만 아니라이 것은 p5

js 라이브러리에 내장되어있다 그리고 내가 좋아하는 다소 좋은 방법으로이 기능은 파일을 드래그합니다 브라우저에 넣고 해당 파일을 사용하면 파일이 이미지가 될 수 있습니다 그것은 텍스트 파일 일 수 있습니다, 그것은 일종의 데이터 파일 일 수 있습니다; 데이터가 일이다 장래의 비디오에는 여러 가지가 있습니다

데이터 형식을 사용하면 요청할 경우 할 수있는 많은 잠재력이 있습니다 사용자가 이봐, 내게 이미지를주고 정말 흥분되는 것을 할거야 그 이미지가있는 브라우저에서 재미 있거나 수백 개의 이미지를 제공합니다 그리고 심지어 그럼 그게 어떻게 작동하는지 살펴 보겠습니다

우선 무엇을 의미합니까? 그리고 아마도 나는이 다이어그램이 필요 없을 것 같아요 (웃음)하지만 어쨌든 그것을 그립니다; 웹 페이지에 있습니다 페이지에 영역을 만들 것입니다 권리? 왜냐하면 캔버스를 가지고있을 것이고 나는 페이지에서 파일을 드래그하여 거기에 놓으면 어떤 종류의 파일이있는 경우 이것이 이미지라면 나는 그 이미지가 갑자기 나타나고 싶을 것입니다 캔버스에 그려 어떻게 그렇게합니까? 가자 그러면 나는 이것을 미리 설정해 놓았다

나는이 특별한 것을 가지고있다 예를 들어, 정확히 무엇을 말하고 있는지 알 수 있습니다 이 캔버스는 createCanvas () 함수로 만들어지며 background ()가 호출되어서 검은 색임을 알 수 있습니다 blackground, 그러면 캔버스 위가 파선 영역과 같습니다 여기에 파일을 끌어다 놓는다고 화면에 표시됩니다

이제 그게 어디에서 왔습니까? 그것은 HTML 파일에 기록되므로 여기를 살펴보고 볼 수 있습니다 ahh – 취소 할거야 – HTML 파일을보고 너 그것이 있음을 알 수 있습니다 단락 요소가 있습니다

'여기에 파일 끌기' 나는 dropzone이라는 ID를 주었다 그것을 참조 할 필요가 있기 때문에 헤이! 그건 제가 뭔가를 떨어 뜨릴 수있는 단락 요소입니다 그리고 나는 방금 일부 스타일을 그 dropzone을 참조하는 몇 가지 스타일로 작성했습니다 어쩌면 글꼴 크기가 36pt라고 말할 수도 있습니다 어쩌면 너비가 50 % 인 것처럼 할 것입니다 그래서 이것은 또한 뭔가입니다

이전에 보지 못했을 수도있는이 단위가 모두 있습니다 CSS에서 일어나고 있습니다 : 픽셀의 픽셀; 실제로 픽셀 수와 비슷합니다 그 패딩, 타이포그래피와 관련이있는 것에 대한 pt (포인트) (웃음) 누군가가 내가하는 것보다 훨씬 잘 이해한다고 확신하지만, 점이 클수록 글꼴 크기는 커지지 만 백분율은 %입니다 상대적인; 그래서이 DOM 요소가 항상 크기의 50 %가 될 경우 당신이 지금 다시 볼 수 있다면 당신은 내가 볼 수있는 페이지 크기를 볼 수 있습니다 DOM 요소의 크기가 고정되어 있지 않은 페이지는 항상 크기가 50 % 페이지의 그것은이 비디오에 추가되는 멋진 작은 팁 비트입니다

어떻게 파일을 드래그 할 수 있도록 만들 수 있습니까? 필자가 지금 파일을 드래그하면 어떤 일이 발생합니까? 나는이 파일을 여기로 끌고, 나는 그것을 버리고 잃어버린 것이다 나는 페이지에서 사라져 버렸다 당신은 그것이 무엇인지 볼 수 있습니다 그 파일은 문자 그대로 문자 그대로 페이지 그것은 내가 모르는 박테리아 파일 일뿐입니다

무지개와 유니콘이 아닌 박테리아가있는 것 외에 나는 갔다 잘못된 방향으로 (웃음)하지만 재미 있습니다 좋아, 음 그래서 나는해야한다 먼저이 작업을 수행해야합니다

자바 스크립트 이벤트를이 요소에 추가합니다 이벤트를 처리하고 싶습니다 브라우저가 저를 위해 그 사건을 바로 처리 했습니까? 파일을 드래그하여 브라우저는 '우'처럼 가정합니다 브라우저이고, 파일을 드래그하고 있습니다 열어 봐

' 나는 브라우저에 말하고 싶다 "아뇨, 아뇨, 아뇨, 여기 책임자예요 네가 할 일을 하지마, 너를 위해서 다른 걸 얻었 어 뭔가 다른 계획을 세웠습니다 "그래서 내가 여기 와서 내가 먼저해야 할 일은, 아, 변수를 만들고 select ()를 호출하여 select, let 's 다른 곳에서 액세스하려고 할 수 있으므로이 변수를 전역 변수로 지정하십시오

나는 dropzone을 선택한다고 말할거야, 지금 여기서하고있는 것 어느정도 혼란 스러울 지 모르지만 나는 이것을 매우 편리하게 생각한다 나는 변수를 똑같이 이름 짓기를 좋아한다 id라는 이름으로, 그것은 절대적으로 재발행되지 않습니다 이드는 완전히 될 수있다

diff, 그리고 아무도 그들이 알고 있는지 여부를 알지 못한다 그냥 프로그래머, 나에게 조금 편리하지만, 나는 그렇지 않다 거기서 일어나는 일과 같은 것이 있다는 것을 혼란스러워하기 바란다 그게 바로 변수 이름에 이드와 같은 이름을 붙이는 것입니다 좋아 다음엔 (한숨) 당신이 지역에 이벤트를 첨부 할 수 있다는 것을 알고 있습니다

해당 이벤트를 호출하여 해당 객체에서 호출되는 함수로 그래서 mousePressed () 이벤트, changed () 이벤트, input () 이벤트 mouseOver (), mouseOut () 이것은 내가 본 이벤트입니다 이전 동영상에서 새로운 이벤트가있어 (웃음) 기억 안나 그것이 무엇인지 불렀지 만 드래그되는 것이 하나 있다는 것을 안다

dragOver () so dragOver 이벤트는 highlight라는 함수로이를 처리합니다 그래서 나는 함수 highlight (), dropzone dot 스타일, 배경을 말할 것이다 색상을 좀 알려주세요 여기를 축소하면됩니다

그래서 지금 이것은 최소한 하나의 이벤트 드래그를 처리했습니다 이 파일을 드래그하면 회색으로 변합니다 이제는 절대로 회색이 되긴했지만 적어도 나는 그 사건을 가지고있다 그래서 이것은 아무 것도 아니다 지금까지해야 할 일은 파일을 처리하는 것과 아무 관련이 없습니다

그 위에 끌면; 그 위에 마우스를 올려 놓으면 아무것도하지 않습니다 파일없이 마우스를 끌면 아무 것도하지 않습니다 이 이벤트는 파일을 드래그하여 회색으로 표시되는 경우에만 표시됩니다 그래서 내가 할 수있는 한 가지는 파일을 드래그하는 것과 그럼 "아니, 아니, 아니 나쁜 생각 나쁜 생각은 파일을 가져 가라 어쩌면 내가 그것을 강조하고 싶지 않을까? 그래서 나는 기억할 수 없다고 말할 수있다

그것은 무엇이라고하지만 나는 그것을 dragOut () unhighlight 생각하고 난 그냥 다시 설정합니다 배경색이 어색해요 다른 기능을 쓸거야 배경색을 흰색으로 바꾼다면 이제는 자신에게 질문을 할 수도 있습니다 다른 동영상에서이 문제를 해결할 수 있지만 질문 할 수 있습니다

왜 내가이 두 가지 기능을 필요로합니까? 정말 그 중 하나의 기능만을 사용할 수 있습니다 논쟁을 받아 들인다 : 백색 또는 검정 나는 백색 또는 회색을 의미한다, 그리고 나서 dragOver는 회색으로 그 기능을 호출 할 수 있습니다 white gray huuh dragOut 흰색과 함께 그 함수를 호출합니다 이것은 실제로 javascript 나는이 방법을 편의상 다시하고 있기 때문에이 방법을 사용하고있다 방법은 어떤 종류의 논쟁을 얻을 수있는 일종의 까다 롭습니다 그 기능들 나는 그것에 도착하고 싶다, 나에게 상기 시켜라! 나에게 상기 시켜라! 나에게 상기시켜

나는 기억할 것이다, 좋은 시나리오를 생각하고 좋은 비디오를 만들려고 노력할 것이다 자바 스크립트의 근본적인 측면과 같은 일종의 원인 그것은 closure라고 이름이 지어지는 ok를 사용한다 그래서 우리는 지금 그것을하지 않고있다 지금 당장이 일을하고 있지 않다 하지만 그 질문을하는 것이 옳습니다 (웃음)

내가 은유 적으로 말하는 사람이라고 생각하는 사람은 너를 의미한다 음 예 좋아, 음, 정의되지 않은 함수 라인 8 드래그

아마도 dragOut이 잘못되었습니다 (웃음) 그래서 우리가 이것을 어떻게 알아낼 수 있을까요? p5 DOM API가 무엇인지 상상해보십시오 이걸 좀 봐라 그러면 네가이 일을하고이 오류가 생기면

당신은 그것을 찾는 방법을 찾고 싶었습니다 당신은 브라우저를 열 수 있습니다 너는 p5jsorg에 가서이 uuhh 음을 클릭 할거야 당신이 참조 아래에 이것을 찾을 수 있어야하고 그것이 바뀔 것이라 확신합니다

어느 시점에서 곧 찾을 수있는 더 쉬운 방법은 도서관 밑으로 갈 것입니다 그리고 p5 DOM으로 갈거야 그리고 이제 나는 이것들 모두를 봐야 해 이 모든 방법들을 살펴보고 나는 드래그라고 불렀다하지만 우리는 볼 수있다

여기 혼란 이벤트는 실제로 dragLeave ()라는 이름입니다 dragLeave 함수와 addClass () 및 removeClass ()가 있습니다 흥미롭게도 수업 시간에 일어난 일에 대해 생각하고 있습니다 이전 동영상과 나는 그것이 실제로 변경되어야하지만 어쨌든 궁금해 아, 그것은 내 자신의 시간에 그렇게 생각해야 할 부차적 인 주제입니다 dragLeave ()는 내가 원한 함수의 이름입니다

그래서 그것을 최소화하고, 돌아와서 나는 그것을 클릭하여 볼 수있었습니다 좀 더 자세한 정보는 있지만 지금 당장 할 필요는 없습니다 여기에 dragLeave를 입력하면됩니다 다시 그리고 여기 우리는 파일을 떠난다, 파일은 그 일을 떠난다 좋은 작은 UI가 사용자 인터페이스 상호 작용 설계에 얼마나 좋았는지 (웃음) 풍자적이다

음,하지만 이걸 좀 더 직관적으로 처리 할 수 ​​있다는 것을 알 수 있습니다 너가 너의 것을 끝낼 때의이 유형의 사건 그런 것, 그러나 우리는 흥미 진진한 종류를 놓치고 있습니다 이것은 마치 내가 좋아하는 것 같이 아무 일도 일어나지 않을거야 저것 똑같은 일이 생겼어

그 이벤트는 마우스를 놓을 때의 드롭 이벤트입니다 해제 조치; 이것은 내가 릴리스 동작을 흉내 낸다 나는 처리 할 필요가있다 그 이벤트와 그 이벤트는 drop () 함수로 처리됩니다 이제 어떻게 될까? 여기에서? 이것에 대해 잠시 생각해 봅시다

이것을 실행해라 일어날 일이 두 가지있다 교활한; 한 가지 일은 다른 파일을 읽어야한다는 것입니다 일어날 필요가있는 일이 있습니다 저는 이것을 실제로 알고 싶습니다

거기에는 정말 두 가지가 없습니다 그렇지 않습니다 직관적으로 두 가지가 없습니다 소지품; 바로 그 순간이 있단 말인가? 나는 떨어졌다 그래서 내가 떨어질 때 나는 같은 스타일을 적용하는 것과 같이 해당 이벤트를 처리하고 싶습니다

unhighlighitng 그것을 누른 다음 나는 또한 떨어지고있는 파일을 읽고 싶다 하지만 실제로는 두 개의 분리 된 콜백으로 나뉘며 실제로 그것에 대한 좋은 이유와 좋은 이유는 내가 이 모든 이미지들을 가져 가라 이 모든 이미지를 브라우저로 드래그하면 어떻게 될까요? 한 번에 하나씩 각 파일을 처리하기 위해 콜백이 필요하지만 단 하나만 있습니다 그런 의미에서 그렇게 떨어지는 순간과 나는 어느 것을 잊어 버릴까요? 참조로 돌아가서, 아아아, 내가 여기에 참조로 돌아 가게 해줘 이 드롭 이벤트를 클릭하면 이걸 읽을 수 있습니다

(콜백, 콜백) 그래서이 callb보세요 첫 번째 콜백이 발생했습니다 파일이 삭제 될 때 이벤트가 실제 이벤트를 삭제합니다 두 번째 콜백은 파일이로드되고 실제로는 별도의 시간에 발생하므로 드래그 앤 드롭 방식으로 500MB 이미지 파일 맞지? 그 순간은 즉시 발생하지만 브라우저를 사용하게 될 수도 있습니다 그 아주 큰 파일을 읽는 동안 꽤 오랜 시간이 걸렸습니다

그래서 그것들은 두 개의 분리 된 파일입니다 이벤트가 끝나면 내 코드로 돌아갈 수 있으며 언제 내가 알 수 있다고 말할 수 있습니다 그것을 놓으십시오 나는 또한 상자 권리를 unhighlight하고 싶다? 그건 내가 그것을 강조하고 싶네 그리고 파일을 처리하고 싶습니다 그래서 지금은 acc입니다

두 가지 일을하고 있습니다 내가 그것을 버리 자마자 상자를 비우고 새로운 함수를 불러올 것입니다 gotFile () 흥미롭게도 함수 gotFile (file) 그러니 이걸 실행하고 여기에 유니콘을 끌 때 적어도 한번 보자 그냥 유니콘 만 보자 하이라이트가 맞다 그것을 강조 표시합니다

강조 표시를 해제하고, 강조 표시를 해제합니다 나는 기본 브라우저 동작을 기본 브라우저 동작으로 변경했습니다 그 파일을 열어봤을 텐데 지금은 여기에 간다 이제는 원하는대로 할 수 있고 무엇이든 할 수있을뿐만 아니라 내가 원하는; 그 파일에있는 데이터로 원하는대로 할 수 있습니다 예를 들어, createImg (file)라고 말할 수 있습니다

이제는 실제로 생각하지 않습니다 일 (웃음) 나는 그것이 작동하지 않을 것이라는 것을 안다 그러니 그걸로 시도해 보자

이 무지개가 맞습니까? 뭔가가 거기에 등장했지만 깨진 것 같아요 이미지이므로 여기에이 함수가 제공하는 인수 이것은 실제로 당신에게 다소 새로운 것이 될 수 있습니다 highlight () 또는 unhighlight ()와 같은 Google 콜백에는 데이터가 없습니다 그것과 함께 도착; 그래서 이것은 새로운 시나리오입니다이 콜백 p5는 파일을로드 할 준비가되었을 때 콜백을 트리거하지만 전달도 가능합니다

변수와 그 내부 변수는 단지 p5는 정말 멋지 네요 친구가 p5와 같은 모습을 보여 주면이 기능을 부르겠다 이 변수를 건네고 그 변수를 채울거야

해당 파일과 관련된 모든 데이터와 함께,이 파일 변수는 실제로 p5 파일 객체의 인스턴스와 같은 모든 정보가 있습니다 나는 그 파일의 이름이 얼마나 큰지 알고있다 많은 메타 데이터가있다 그 파일과 관련이 있고 그 파일에있는 것이 뭔가라는 속성입니다 데이터와 그 데이터가 파일에있는 텍스트 일 ​​수 있습니다

다른 일부 데이터 형식은 파일에 있거나 이미지 데이터 일 수 있습니다 그래서 만약 내가 createImg (filedata) 이제 이것을 보아라! 오, 오, 오케이, 참조를 보자 나는 내가 도망 간 것을 구했다 꽤 맞았다는 것이 확실하지만 여기에 약간의 문제가 있다는 것을 알고 있습니다

작동하므로 참조로 돌아가서 참조 및 파일 mmmh 파일을 찾고 싶습니다 이 파일은 p5 파일 객체입니다 누군가 나를 위해 그것을 빨리 찾아라! (웃음) p5 이미지 p5file 음이 보이지 않아서 어째서 어떤 이유로인지 알 수 없습니다 그것이 아마 있어야하는 참조는 과감한 복용입니다

여기서 측정하고 p5js GitHub 저장소로 이동합니다 나는 단지 실제로 찾아야 만한다 내가 뭘 찾아야하는지 알지 예

실제로이 작업을 수행하는 예제가 있습니다 나는 갈 수 있었다 나는 이것을 GItHub 저장소에 넣을 예정이었다 네가 좋아하는 것처럼 느껴질거야 빨리 비디오를 통해 좋아

30 초 또는 1 분이면이 부분을 건너 뛸 수 있지만 찾아 볼 것입니다 어쩌면 배우기도하고 DOM 아래에서 아 봐요 p5 요소 아래에있는 아아가 아마도이 드롭을 찾을 수 있습니다 올바른 장소 예 예 아니오 예 아래에 있습니다 ran-dom dom, 아하 거기에 우리가 아 아 아 아 파일

data 잘 골리에 의해 나는 옳았다 나는 아니었다? createImg (filedata) 그래서 그것의 내가 뭘하려고했는지, 왜 그 일을하지 않았 니? (웃음) 그냥 좋아, 그럼 어쩌면 이것에 대해 조금 체계적으로 보자 내가 잘 모르겠다

예를 들어 보자 거기에 메타 데이타가 있는지 봅시다 Imma는 createP (filename)라고 말합니다 ahh createP (file

type), createP (filesize) 등등 거기에 모두 파일에는 이와 관련된 모든 메타 데이터가 있습니다 그것의 이름, 그것은 형식이야 크기이기 때문에 단지 문자열 일 뿐이며 데이터는 실제로 문자열이어야합니다

이미지 물건 그래서 이것을 실행 하고이 무지개 파일에 드래그하자 정의되지 않은 드롭이 정의되지 않은 것을 볼 수 있습니다 우, 너는 내가 뭘했을지 짐작할 지 모르겠다 내가 한 일을 안다 나는 아마도 그것들의 순서를 뒤집었다 나는 그 콜백의 순서를 바꾸었다

그래서 이것은 매우 흔한 일입니다 일어나는 일, 내가 너를 그냥 망쳐 놓는 걸 즐기지 않는거야? 항상 지껄 인다? 나는 네가 정말로 희망한다 그래서 이것은, 이것은 여러분이 우리가 이것을 보았고 깨달았 음을 알려주는 것입니다 콜백이 트리거하는 것처럼 나는 트리거한다는 것을 의미합니다 두 콜백이 있기 때문에 둘 다 트리거됩니다

하지만 아마도 잘못된 순서로 그들을 유발하고 있습니다 그래서 p5 참고 문헌 ahh ahh library로 돌아가 봅시다 DOM; 이 드롭 함수를 여기서 보시고 다시 읽도록하겠습니다 첫 번째 콜백은 파일이 삭제 될 때 트리거됩니다 두 번째 콜백이로드 된 파일을 수신하도록 트리거합니다

내가 그랬던 것처럼 그게 아니야? 처음 콜백하지만 하지만 나는 완전히 내 실수가 아니므로 참조를 느끼고있다 나는 참조가 나를 잘못 인도했다는 느낌이 들었다 아마 첫 번째 인자는 파일을 다루는 calback 일 것이다

두 번째 인수는 그냥 이벤트를 처리하는 콜백입니다 떨어지는 사건 그래서 이것을 다시 시험해 봅시다 그리고 우리는 여기 야아! 그래서 나는 내 를 얻었고, 내가 var 이미지가 같다고 말할 무언가를 해봅시다

crreateImg () imagesize (100,100)라고 말하면 createP를 할 것입니다 하나의 문자열에 합류하게 될 것입니다 이 모양이 좀 더 짧아서, 이제 다시 한번 보겠습니다 우리가 드래그하는 좋은 순간을 가질 수있는 더 큰 창을 만들거야

여기 유니콘, 우리 유니콘이 있어요 나는 무지개를 끌고 있습니다 무지개 나는 여기에 또 다른 무지개를 끌고있다 여기서 볼 수 있습니다

파일이 들어오고 있습니다 파일을 페이지에 추가하고 있습니다 또한 정보를 얻습니다 파일의 크기, 파일 이름 나는 그 정보를 사용할 수 있었다 그래서 (심호흡을가집니다) 이것은 잘하면 흥미 롭습니다

내 말은, 정말 아무 것도하지 않고 또한 언급해야한다는 것입니다 이게 효과가 있음을 증명해 보겠습니다 다시 시작하려면이 페이지 새로 고침 한 번에 모든 이미지를 드래그하자 그러면 모든 이미지가 나타납니다 그래서 우리는 처리했습니다

콜백은 각각 여러 번 트리거되었습니다 이미지 um 그래서 내가 생각하기에 좀 더 할거야 DOM 요소가 있으므로 마술처럼 보일 것입니다 여기에 파일을 드래그한다고하는 점선과 같습니다 DOM 요소를 드래그하여 버튼처럼 사용할 수 있음을 알 수 있습니다

또는 슬라이더는 간신히 어떤 의미를 갖지만 하지만 실제로이 예제에 대해 무언가를 해 보겠습니다 아아아, 드래그 앤 드롭 2 잊어 버리는 걸 말 할거야 이 dropzone 것에 관하여 저것을 거기에서 가지고 가십시오, 저것에서 그것을 가지고 가십시오; 캔버스를 변수에 저장하고 canvasdragOver라고 말하지 않는 이유는 무엇입니까? canvasdragLeave, canvas

Drop 그래서 이것을 실행하면 이것을 볼 수 있습니다 이제이 이미지를 가져 와서 드래그 할 수 있습니다 그것은 캔버스 위에; dropzone 정의되지 않습니다 아, 오, 좋아, 난 아무것도 필요 없어 이 스타일링 물건의 정직 당신과 정직하게 나는 내가 훨씬 더 간단하게 할 수 있다는 것을 신경 쓰지 않기로 결정했다 내가 아는 한 통화 콜백을 사용할 수 있습니다 그냥 시각적 인 피드백 부분을 건너 뛰는거야? 그래서 무엇이든 끌고 갈 수 있습니다

drop 요소와 이제는 이것에 대해 다른 방식으로 생각해 봅시다 if 캔버스에 요소를 드래그하면 이미지를 볼 수 있습니다 캔버스, 그래서 내가 뭘 할 수 있을까? 이미지 함수를 호출 할 수 있습니다 이미지 (img, 0, 0, width, height) 이것은 다시 차이점입니다 DOM 요소 이미지를 만든 다음 그림을 그리는 것과 이미지를 캔버스에 넣습니다 image () 함수는 그 이미지가 드로잉 이미지를 사용하거나 캔버스에 이미지를 생성하면 createImg는 DOM 요소; 그래서 이제 우리는 이걸 아셔야합니다 지금은 이미지의 왼쪽 상단 모서리가 작아 보입니다 그걸 놀라게하는 이유는 아마도 너비가 그리고 음 의 높이가 놀랍습니다 나는 그것이 조금있는 것처럼 느낀다 거기에 p5 버그 같은 비트 나 작동하지 않는 wh이 뭔지 모르겠다

그걸 조사 해봐 하지만 내가 너에게 보여주고 싶었던 것도 나는 그것이 음을 통해 이미지를 만드는 방법으로 그것을 할지라도 나는하지 않는다 이 ahh 음 데이터를 얻는 것 같은 방법으로 이미지를 만드는 방법 아 내가 사용할 수있는 파일, p5 함수 imagehide ()를 사용할 수 있습니다

그래서 나는 그 DOM을 만들 수있다 요소를 사용하여 파일을 열면 즉시 숨길 수 있습니다 그것은 캔버스에 그리고 저는 실제로 이것이 일하고 있다는 것에 놀라움을 금치 못했습니다 내가 깨달았 기 때문에 나는

다른 생각이 들었다고 생각했다 이것과 관련된 문제 오,하지만 지금은 효과가 있습니다 내가 너비와 높이로 놓친 것은 어쩌면 그 전에

그 크기 아마 물건을 엉망으로 만들었을거야 하지만 이걸 봐라 당신이 지금 볼 수있는 투명한 이미지였습니다 나는 이미지를 드래그 앤 드롭합니다 캔버스에 나는 그곳에 이미지를 본다 그래서이 특정 비디오를 마칩니다 음, 내가 보여주고 싶은 것이 내가 한 것 같아 그것은 페이지의 모든 요소에서 만들 수있는 아이디어입니다

그 위에 파일을 드래그 할 때 처리합니다 그 위에 파일을 드래그하면 실제로 드롭합니다 그 파일을 이미지 파일이라면 그 이미지를 사용하여 이미지 데이터와 음 앞으로 다른 비디오에 대해 이야기하기

아마 텍스트 파일을 가지고 그것을 어떻게 할 것인지를 보여줄 것입니다 텍스트 파일에서 단어를 계산하는 것과 비슷하지만 조사 할 수는 있습니다 loadStrings () 함수와 일종의 어떻게 당신이 그것을 할 수 있습니다 음 나는 좋은 운동이 없다

나는 생각할 수 없다 나는 무엇인가를 쓸 것이다 기술 감사합니다 DOM 비디오가 한 가지 더 있습니다

이 후 자막 Amaraorg 커뮤니티