기사를 작성할 때는 종종 사진을 삽입해야합니다. 기존 사진을 삽입하는 것은 매우 간단합니다. 때로는 훌륭한 웹 사이트 목록을 만들 때 웹 페이지 스크린 샷을 추가해야합니다. 이 과정은 매우 지루합니다. URL을 전달하는 명령 줄 도구를 개발 한 다음 페이지 스크린 샷을 생성하는 것을 고려할 수 있습니다.
웹 페이지 스크린 샷에 Node-WebShot을 사용하십시오
사용 된 NPM 모듈에는 Yargs 및 Node-WebShot이 포함됩니다. Yargs에 관한 기사에 대해서는 여기를 참조하십시오.이를 참조하여 Yargs에 대한 완전한 가이드 인 개인 독점 명령 줄 도구 세트를 작성하십시오.
Node-WebShot은 Phantomjs를 호출하여 웹 페이지 스크린 샷을 생성합니다. Phantomjs는 매우 유명한 NPM 프로젝트로 스크립트 버전의 WebKit 브라우저와 동일합니다. Phantomjs를 통해 스크립트 및 웹 페이지를 상호 작용할 수 있으므로 Phantomjs는 종종 웹 페이지 자동화 테스트에 사용됩니다.
Phantomjs는 일반 브라우저와 같은 전체 웹 페이지 컨텐츠를로드 한 다음 메모리로 렌더링합니다. 육안으로 렌더링하는 페이지를 볼 수는 없지만 사진을 생성하여 볼 수 있습니다. Node-WebShot은 Phantomjs의 렌더링 인터페이스를 사용하여 웹 페이지 스크린 샷을 얻습니다.
Node-WebShot Google 홈페이지에 대한 샘플 코드를 생성합니다.
var webshot = require ( 'webshot'); webshot ( 'google.com', 'google.png', function (err) {// 이제 Google.png}에 저장된 스크린 샷); Phantomjs Google 홈페이지에 대한 샘플 코드를 생성합니다. var page = require ( 'webpage'). create (); page.open ( 'http://github.com/', function () {page.render ( 'github.png'); phantom.exit ();});그렇다면 Phantomjs를 직접 사용하지 않는 이유는 무엇입니까? 한 단어가 게으르다!
또한 Node-WebShot은 단순히 파일 읽기 및 쓰기를 캡슐화합니다. Node.js에 익숙한 개발자는 그러한 인터페이스를 쉽게 쓸 수 있다고 생각하지만 휠은 사용하기 쉽기 때문에 직접 만들지 마십시오.
노드-웹 쇼트 스트리밍 통화를 작성하는 방법 :
var webshot = require ( 'webshot'); var fs = 요구 ( 'fs'); var renderstream = webshot ( 'google.com'); var file = fs.createWritestream ( 'google.png', {encoding : 'binary'}); renderstream.on ( 'data', function (data) {file.write (data.toString ( 'binary'), 'binary');});Node-Webshit는 또한 웹 페이지 스크린 샷의 모바일 버전 생성을 지원합니다.
var webshot = require ( 'webshot'); var 옵션 = {Screensize : {너비 : 320, 높이 : 480}, 샷 : {너비 : 320, 높이 : 'All'}, userAgent : 'mozilla/5.0 (iPhone; U; CPU iPhone OS 3_2 Mac OS X; en-us)' + 'AppleWebKit/531.21.20 (khtml); webshot ( 'flickr.com', 'flickr.jpeg', 옵션, 함수 (err) {// 이제 flickr.jpeg}에 저장된 스크린 샷);마지막으로, 우리는 Yargs와 Node-WebShot을 통합했지만 불행히도 우리는 작업 의이 부분을 도와 주면서 직접 설치했습니다.
npm isntall -g webshot -cli
데스크탑 스크린 샷을 사용한 시스템 스크린 샷
Desktop-Screenshot은 크로스 플랫폼 시스템 스크린 샷 프로젝트입니다. 사용량은 하나의 URL 매개 변수가 누락 된 것을 제외하고는 Node-WebShot과 유사합니다.
var Screenshot = require ( 'Desktop-Screenshot'); 스크린 샷 ( "Screenshot.png", 함수 (오류, 완료) {if (error) console.log ( "스크린 샷 실패", error); else console.log ( "스크린 샷 성공");});이것은 내 시스템의 스크린 샷입니다
문제는 명령 줄을 호출 할 때이 창도 스크린 샷에 나타나고이 창을 제거하는 좋은 방법이 없다는 것입니다. 시스템 스크린 샷은 여전히 Windows와 함께 제공되는 좋은 지점입니다.
이미지 최적화
마지막으로 두 가지 이미지 최적화 도구가 도입되었습니다
Imagemin
svgo
SVGO는 SVG 이미지를 최적화하는 데 사용됩니다. SVG는 아이콘 글꼴을 대체하고 새로운 트렌드가됩니다.