클라이언트 측 프로그래밍을 사용하여 이미지에 대한 브라우저 다운로드를 강제하는 방법은 무엇입니까?

클라이언트 측 프로그래밍을 사용하여 이미지 브라우저 다운로드 강제

배경

클릭 시 Excel 시트 또는 기타 다운로드 가능한 파일이 있는 경우 브라우저는 일반적으로 다운로드 프로세스를 원활하게 시작합니다. 그러나 이미지 파일에 대해서는 이 동작을 구체적으로 복제해야 합니다.

이미지 다운로드 구현

클라이언트 측 프로그래밍만 사용하면 다음과 같이 이미지 다운로드를 수행할 수 있습니다. :

document.onclick = function (e) {
    e = e || window.event;
    var element = e.target || e.srcElement;
    if (element.innerHTML == "Image") {
        var name = element.nameProp;
        var address = element.href;
        saveImageAs1(element.nameProp, element.href);
        return false; // Prevent default action and stop event propagation
    }
    else
        return true;
};

function saveImageAs1(name, address) {
    if (confirm('you wanna save this image?')) {
        window.win = open(address);
        setTimeout('win.document.execCommand("SaveAs")', 100);
        setTimeout('win.close()', 500);
    }
}

이 코드는 이미지 요소의 클릭 이벤트를 가로채고 사용자에게 다른 이름으로 저장 대화 상자를 사용하여 저장하라는 메시지를 표시합니다. box.

엑셀 다운로드의 경우

엑셀 다운로드의 경우 브라우저가 내부적으로 다운로드 과정을 처리합니다. MIME 유형을 기반으로 파일 유형을 식별하고 추가 프로그래밍 없이 적절한 다운로드 동작을 실행합니다.

HTML5 '다운로드' 속성

그러나 최신 브라우저는 에 대한 '다운로드' 속성 이미지 다운로드를 시작하는 보다 편리한 방법을 제공하는 요소:

<a href="http://localhost:55298/SaveImage/demo/abc.jpg" download>Image</a>

이 속성은 브라우저가 제공된 파일 이름 또는 지정되지 않은 경우 원본 파일 이름으로 이미지를 다운로드하라는 메시지를 표시합니다. 이 방법을 사용한 교차 출처 다운로드는 보안 문제로 인해 2018년부터 더 이상 지원되지 않습니다.

위 내용은 클라이언트 측 프로그래밍을 사용하여 이미지에 대한 브라우저 다운로드를 강제하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!