복붙노트

[JQUERY] 이미지 다운로드에 힘 브라우저 클릭에 파일을

JQUERY

이미지 다운로드에 힘 브라우저 클릭에 파일을

해결법

  1. 1.HTML5를 사용하면 당신은 당신의 링크 속성 '다운로드'를 추가 할 수 있습니다.

    HTML5를 사용하면 당신은 당신의 링크 속성 '다운로드'를 추가 할 수 있습니다.

    준수 브라우저는 다음 프롬프트 (이 예제의 image.png)에 동일한 파일 이름을 가진 이미지를 다운로드하는 것입니다.

    이 속성에 대한 값을 지정하면, 그 새로운 이름이 될 것이다 :

    UPDATE :이 교차 기원하는 HREF 더 이상 가능하다 봄 2018를 사용합니다. 그래서 만약 당신이 의도 한대로 imgur.com가 작동하지 않습니다 이외의 다른 도메인에 을 만들려면. 크롬 중단 된 및 제거 발표

  2. 2.나는 문서에 대한 링크를 추가하여 너무 크롬과 파이어 폭스에서이 작업을 얻을 수 있었다.

    나는 문서에 대한 링크를 추가하여 너무 크롬과 파이어 폭스에서이 작업을 얻을 수 있었다.

    var link = document.createElement('a');
link.href = 'images.jpg';
link.download = 'Download.jpg';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

  3. 3.

    function forceDownload(url, fileName){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.onload = function(){
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL(this.response);
        var tag = document.createElement('a');
        tag.href = imageUrl;
        tag.download = fileName;
        document.body.appendChild(tag);
        tag.click();
        document.body.removeChild(tag);
    }
    xhr.send();
}

  4. 4.업데이트 봄 2018

    업데이트 봄 2018

    <a href="/path/to/image.jpg" download="FileName.jpg">

    이것은 여전히 ​​파일이 동일한 도메인 이름에있는 경우이만이 작업을 의미 출처 간 다운로드를 위해이 기능을 사용할 수 2018년 2월 크롬으로 지원된다.

    나는 크롬의 새 업데이트 장애인 크로스 도메인 다운로드 후 크로스 도메인 이미지를 다운로드에 대한 해결 방법을 알아 냈어. 당신은 당신의 요구에 맞게 기능으로이 문제를 수정할 수 있습니다. 당신은 당신이 필요한 경우 좀 더 연구 이미지 마임 타입 (JPEG, PNG, GIF 등)을받을 수 있습니다. 뿐만 아니라 동영상이 비슷한을 할 수있는 방법이있을 수 있습니다. 이 사람을 도움이되기를 바랍니다!

    VAR 이미지가 새로운 이미지를 () =; image.crossOrigin = "익명"; image.src = "https://is3-ssl.mzstatic.com/image/thumb/Music62/v4/4b/f6/a2/4bf6a267-5a59-be4f-6947-d803849c6a7d/source/200x200bb.jpg"; // 파일 이름을 얻을 - 당신의 이미지 URL은 파일 확장자를 포함하지 않는 경우 그렇지 않으면 파일 이름을 수동으로 설정할 수 있습니다 이것을 수정해야 할 수도 있습니다 VAR fileName에 = image.src.split (/ (\\ | \ /) / g) (.pop); image.onload = 함수 () { VAR 캔버스 = document.createElement ( '캔버스'); canvas.width = this.naturalWidth; // 또는 '폭'당신은 특별한 / 축소 크기를 원하는 경우 canvas.height = this.naturalHeight; // 또는 '높이'당신은 특별한 / 축소 크기를 원하는 경우 . canvas.getContext ( '2D')의 drawImage (이, 0, 0); var에 BLOB; // ... 데이터 URI로 얻을 경우 (image.src.indexOf ( ". JPG")> -1) { 블롭 = canvas.toDataURL ( "이미지 / JPEG를"); } 다른 경우 (image.src.indexOf ( ". PNG")> -1) { 블롭 = canvas.toDataURL ( "이미지 / PNG를"); } 다른 경우 (image.src.indexOf ( ". GIF")> -1) { 블롭 = canvas.toDataURL ( "이미지 / GIF"); } 다른 { 블롭 = canvas.toDataURL ( "이미지 / PNG를"); } $ ( "몸"). html로 ( " 다운로드로 이미지를 클릭하십시오. 로
    "); }; <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

  5. 5.

    var pom = document.createElement('a');
pom.setAttribute('href', 'data:application/octet-stream,' + encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);

  6. 6.약속 및 비동기 / await를를 사용하는 더 현대적인 접근 방법 :

    약속 및 비동기 / await를를 사용하는 더 현대적인 접근 방법 :

    toDataURL(url) {
    return fetch(url).then((response) => {
            return response.blob();
        }).then(blob => {
            return URL.createObjectURL(blob);
        });
}

    그때

    async download() {
        const a = document.createElement("a");
        a.href = await toDataURL("https://cdn1.iconfinder.com/data/icons/ninja-things-1/1772/ninja-simple-512.png");
        a.download = "myImage.png";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
}

    여기에 문서를 찾기 : https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

  7. 7.이 문제에 대한 일반적인 솔루션입니다. 하지만 파일 확장자가 당신의 인코딩과 일치해야 하나 개 매우 중요한 부분이있다. 그리고 물론, downlowadImage 기능의 콘텐츠 매개 변수는 이미지의 문자열을 base64로 인코딩해야합니다.

    이 문제에 대한 일반적인 솔루션입니다. 하지만 파일 확장자가 당신의 인코딩과 일치해야 하나 개 매우 중요한 부분이있다. 그리고 물론, downlowadImage 기능의 콘텐츠 매개 변수는 이미지의 문자열을 base64로 인코딩해야합니다.

    CONST clearUrl URL = => url.replace (/ ^ 데이터 : 화상 \ / \ + w;베이스 64 / ''); CONST downloadImage = (명, 컨텐츠 유형) => { VAR 링크 = document.createElement ( 'A'); link.style = '총수 : 고정; 왼쪽 -10000px; '; link.href = '데이터 : 애플리케이션 / octet-stream을,베이스 64, $ {에 encodeURIComponent (콘텐츠)}'; link.download = /\.\w+/.test(name)? 이름 :.`$ {이름} $ {타입}`; document.body.appendChild (링크); () link.click; document.body.removeChild (링크); } [ "PNG", "JPG", "GIF"]. 대해 forEach (TYPE => { VAR 다운로드 document.querySelector (`# $ {타입}`) =; download.addEventListener ({) (, 기능을 '클릭' VAR IMG = document.querySelector ( '#의 IMG'); downloadImage ( 'myimage을'clearUrl (img.src) 형); }); }); GIF 이미지 <이미지 ID = "IMG"SRC = "데이터 : 이미지 / GIF,베이스 64, R0lGODlhPQBEAPeoAJosM가 // AWO / AwHVYZ / z595kzAP / s7P + goOXMv8 + FHW / v739 / F + 8PD98fH / 8mJl + FN / 9ZWb8 / PzWlwv /// 6wWGbImAPgTEMImIN9gUFCEm / gDALULDN8PAD6atYdCTX9gUNKlj8wZAKUsAOzZz + UMAOsJAP / Z2ccMDA8PD / 95eX5NWvsJCOVNQPtfX / 8zM8 + QePLl38MGBr8JCP + zs9myn / 8GBqwpAP / GxgwJCPny78lzYLgjAJ8vAP9fX / + MjMUcAN8zM / 9wcM8ZGcATEL + QePdZWf / 29uc / P9cmJu9MTDImIN + / R7 + / vz8 / P8VNQGNugV8AAF9fX8swMNgTAFlDOICAgPNSUnNWSMQ5MBAQEJE3QPIGAM9AQMqGcG9vb6MhJsEdGM8vLx8fH98AANIWAMuQeL8fABkTEPPQ0OM5OSYdGFl5jo + PJ / + pqcsTE78wMFNGQLYmID4dGPvd3UBAQJmTkP + 8vH9QUK + vr8ZWSHpzcJMmILdwcLOGcHRQUHxwcK9PT9DQ0O / v70w5MLypoG8wKOuwsP / G4p의 / Q0IcwKEswKMl8aJ9fX2xjdOtGRs / 년 Pz + Dg4GImIP8gIH0sKEAwKKmTiKZ8aB / f39Wsl LFt8dgUE9PT5x5aHBwcP + + + AGP WltdgYMyZfyywz78AAAAAAAD /// 8AAP9mZv /// wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAKgALAAAAAA9AEQAAAj / AFEJHEiwoMGDCBMqXMiwocAbBww4nEhxoYkUpzJGrMixogkfGUNqlNixJEIDB0SqHGmyJSojM1bKZOmyop0gM3Oe2liTISKMOoPy7GnwY9CjIYcSRYm0aVKSLmE6nfq05QycVLPuhDrxBlCtYJUqNAq2bNWEBj6ZXRuyxZyDRtqwnXvkhACDV + euTeJm1Ki7A73qNWtFiF + / gA95Gly2CJLDhwEHMOUAAuOpLYDEgBxZ4GRTlC1fDnpkM + fOqD6DDj1aZpITp0dtGCDhr + fVuCu3zlg49ijaokTZTo27uG7Gjn2P + 하이 8 + PDPERoUB318bWbfAJ5sUNFcuGRTYUqV / 3ogfXp1rWlMc6awJjiAAd2fm4ogXjz56aypOoIde4OE5u / F9x199dlXnnGiHZWEYbGpsAEA3QXYnHwEFliKAgswgJ8LPeiUXGwedCAKABACCN + EA1pYIIYaFlcDhytd51sGAJbo3onOpajiihlO92KHGaUXGwWjUBChjSPiWJuOO / LYIm4v1tXfE6J4gCSJEZ7YgRYUNrkji9P55sF / ogxw5ZkSqIDaZBV6aSGYq / lGZplndkckZ98xoICbTcIJGQAZcNmdmUc210hs35nCyJ58fgmIKX5RQGOZowxaZwYA + JaoKQwswGijBV4C6SiTUmpphMspJx9unX4KaimjDv9aaXOEBteBqmuuxgEHoLX6Kqx + yXqqBANsgCtit4FWQAEkrNbpq7HSOmtwag5w57GrmlJBASEU18ADjUYb3ADTinIttsgSB1oJFfA63bduimuqKB1keqwUhoCSK374wbujvOSu4QG6UvxBRydcpKsav ++ Ca6G8A6Pr1x2kVMyHwsVxUALDq / krnrhPSOzXG1lU TIoffqGR7Goi2MAxbv6O2kEG56I7CSlRsEFKFVyovDJoIRTg7sugNRDGqCJzJgcKE0ywc0ELm6KBCCJo8DIPFeCWNGcyqNFE06ToAfV0HBRgxsvLThHn1oddQMrXj5DyAQgjEHSAJMWZwS3HPxT / QMbabI / iBCliMLEJKX2EEkomBAUCxRi42VDADxyTYDVogV + wSChqmKxEKCDAYFDFj4OmwbY7bDGdBhtrnTQYOigeChUmc1K3QTnAUfEgGFgAWt88hKA6aCRIXhxnQ1yg3BCayK44EWdkUQcBByEQChFXfCB776aQsG0BIlQgQgE8qO26X1h8cEUep8ngRBnOy74E9QgRgEAC8SvOfQkh7FDBDmS43PmGoIiKUUEGkMEC / PJHgxw0xH74yx / 3XnaYRJgMB8obxQW6kL9QYEJ0FIFgByfIL7 / IQAlvQwEpnAC7DtLNJCKUoO / w45c44GwCXiAFB / OXAATQryUxdN4LfFiwgjCNYg + kYMIEFkCKDs6PKAIJouyGWMS1FSKJOMRB / BoIxYJIUXFUxNwoIkEKPAgCBZSQHQ1A2EWDfDEUVLyADj5AChSIQW6gu10bE / JG2VnCZGfo4R4d0sdQoBAHhPjhIB94v / wRoRKQWGRHgrhGSQJxCS + 0pCZbEhAAOw == "/> <버튼 ID = "PNG"> 다운로드 PNG <버튼 ID = "JPG"> 다운로드 JPG <버튼 ID = "GIF"> 다운로드 GIF

  8. 8.2020 년에 나는 브라우저가 파일로 다운로드합니다 이미지의 로컬 복사본을 만들기 위해 물방울을 사용합니다. 이 사이트에서 테스트 할 수 있습니다.

    2020 년에 나는 브라우저가 파일로 다운로드합니다 이미지의 로컬 복사본을 만들기 위해 물방울을 사용합니다. 이 사이트에서 테스트 할 수 있습니다.

    (function(global) {
  const next = () => document.querySelector('.search-pagination__button-text').click();
  const uuid = () => Math.random().toString(36).substring(7);
  const toBlob = (src) => new Promise((res) => {
    const img = document.createElement('img');
    const c = document.createElement("canvas");
    const ctx = c.getContext("2d");
    img.onload = ({target}) => {
      c.width = target.naturalWidth;
      c.height = target.naturalHeight;
      ctx.drawImage(target, 0, 0);
      c.toBlob((b) => res(b), "image/jpeg", 0.75);
    };
    img.crossOrigin = "";
    img.src = src;
  });
  const save = (blob, name = 'image.png') => {
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.target = '_blank';
    a.download = name;
    a.click();
  };
  global.download = () => document.querySelectorAll('.search-content__gallery-results figure > img[src]').forEach(async ({src}) => save(await toBlob(src), `${uuid()}.png`));
  global.next = () => next();
})(window);

  9. 9.이 시도:

    이 시도:

    <a class="button" href="http://www.glamquotes.com/wp-content/uploads/2011/11/smile.jpg" download="smile.jpg">Download image</a>

  10. 10.

    <html>
<head>
<script type="text/javascript">
function prepHref(linkElement) {
    var myDiv = document.getElementById('Div_contain_image');
    var myImage = myDiv.children[0];
    linkElement.href = myImage.src;
}
</script>
</head>
<body>
<div id="Div_contain_image"><img src="YourImage.jpg" alt='MyImage'></div>
<a href="#" onclick="prepHref(this)" download>Click here to download image</a>
</body>
</html>

  11. 11.직접 많은 code.Copy없이 앵커 태그를 사용하여 조각을이 파일을 다운로드하여 텍스트 편집기에서 붙여 넣기를 시도 할 수 있습니다 ...!

    직접 많은 code.Copy없이 앵커 태그를 사용하여 조각을이 파일을 다운로드하여 텍스트 편집기에서 붙여 넣기를 시도 할 수 있습니다 ...!

  12. 12.무엇 .click () 함수와 태그를 사용하는 방법에 대해?

    무엇 .click () 함수와 태그를 사용하는 방법에 대해?

    (압축 버전)

    를 <버튼의 onclick = "document.getElementById를 ( 'downloadtag').) (클릭"> 다운로드

    지금 당신은 JS와 함께 트리거 할 수 있습니다. 또한 다른 예, 이미지 및 텍스트 파일로, 열리지 않습니다!

    (JS 기능 버전)

    다운로드 함수 () { document.getElementById를 ( 'downloadtag') ()을 클릭합니다.; } <버튼의 onclick = "다운로드 ()"> 다운로드 를

  13. 13.나는 것을 발견

    나는 것을 발견

    다운로드 이미지 파일 에

    나를 위해 작동하지 않았다. 왜 그런지 모르겠어요.

    난 당신이 다운로드를 강제로 귀하의 링크의 끝에? 다운로드 = true 매개 변수를 포함 할 수 있음을 발견했다. 나는 Google 드라이브가 사용하는이 기술을 발견 생각합니다.

    귀하의 링크에 포함되어 있습니까? 당신의 HREF의 끝에 진정한 다운로드 =.

    또한 같은 시간에 파일 이름을 설정하려면이 기술을 사용할 수 있습니다.

    귀하의 링크에 포함되어 있습니까? 당신의 HREF의 끝에 및 파일 이름 = My_Image_File.jpeg 진실 다운로드 =.

  14. 14.당신은 그렇게 쓰기 JS 할 필요가 없습니다, 단순히 사용

    당신은 그렇게 쓰기 JS 할 필요가 없습니다, 단순히 사용

    <a href="path_to/image.jpg" alt="something">Download image</a>

    그리고 브라우저 자체가 자동으로 이미지를 다운로드합니다.

    어떤 이유로 작동하지 않는 경우하면 다운로드 속성을 추가 할 수 있습니다. 이 속성을 사용하면 다운로드 할 수있는 파일의 이름을 설정할 수 있습니다 :

    <a href="path_to/image.jpg" download="myImage">Download image</a>

    15. from https://stackoverflow.com/questions/17527713/force-browser-to-download-image-files-on-click by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] JQuery와 이연 - 마무리에 여러 AJAX 요청을 기다리고 [중복]  (0) 2020.10.08
[JQUERY] 어떻게 JQuery와 통해 앵커 클릭을 시뮬레이션 할 수 있습니까?  (0) 2020.10.08
[JQUERY] 나는 JQuery와 클릭 () 나는 바인딩과에 이벤트 처리기를 바인딩 이미 클릭하지 않은 경우 <A> 링크를 따라하기를 호출 할 수 있습니까?  (0) 2020.10.08
[JQUERY] 내가 어떻게 차단하거나 jQuery로 입력 필드에서 특수 문자를 제한 할 수 있습니까?  (0) 2020.10.08
[JQUERY] iframe이 만 페이지의 특정 부분을 표시합니다  (0) 2020.10.08
,

티스토리툴바