HTML + JS 로컬로 다운로드 사진을 달성

HTML5, 우리는이 링크를 클릭하면, <A> 연결을 다운로드 속성을 추가, 다운로드 속성은 파일을 다운로드 할 때 우리가 브라우저의 기본 이름을 지정할 수 있습니다, 새로운 속성이 <A> 노트입니다 다운로드, 속성 값을 다운로드 이름이 팝업 상자 다운로드에 다운로드 속성 트리거 및 다운로드 작업을 강제로 나타납니다

1 : 사진이 <A> 다운로드 링크에 의해 달성 될 수있다

<a href="test.jpg" download="图片名字"> 
     <IMG SRC = "test.jpg를"ALT = ""> 
</a>를

2 : 다운로드 된 이미지를 달성하기 위해 JS 통해 트리거 <A>

<IMG의 ID = "testImg"SRC = "test.jpg를"ALT = ""> 
<Button 클래스 = "downloadBtn"TYPE = "버튼"οnclick = "downloadImg ()">下载图片</ 버튼>
    기능 downloadImg () {
         var에 IMG = document.getElementById를 ( 'testImg'); // 획득 된 영상 다운로드 할 
        var에 URL = img.src;                             // 얻을 이미지 주소 
        VAR A = document.createElement ( 'A');           // 문서 노드의 삽입 생성 
        var에  이벤트 =  새로운 새로운  된 MouseEvent ( '클릭')가            // 마우스 클릭 클릭 이벤트 시뮬레이션 
        a.download = '이미지 이름을'                   // 노드 다운로드의 속성 값 설정 
        a.href = URL을;                                  // 것이다 노드 HREF의 할당 SRC 사진 
        a.dispatchEvent (이벤트)                         // 마우스 클릭 이벤트를 트리거
     }

 

추천

출처www.cnblogs.com/chao202426/p/11403713.html