vue.js 이미지 url 에 따라 이미지 다운로드

2317 단어 vue그림 url사진 다운로드
최근 에 전단 vue.js 도 킹 기능 모듈 을 만 들 때 그림 을 다운로드 하 는 기능 을 실현 해 야 합 니 다.백 스테이지 에서 돌아 온 것 은 그림 url 입 니 다.여러 가지 방법 을 시도 해 보 았 는데 다운 로드 를 클릭 할 때 나 오 는 효 과 는 모두 새로운 그림 페이지 로 뛰 어 들 었 습 니 다.나중에 생각 한 끝 에 이 문 제 를 해결 하 였 습 니 다.
이것 은 배경 에서 돌아 온 제 이 슨 데이터 입 니 다.

내 가 html 에서 인용 한 것 은 다음 과 같다.

<a @click="downCom" >
                    
                <i class="icon-down"></i>
              </a>
vue.js 방법 에서 그림 다운로드 방법:

downCom() {
      let that = this;
      this.$http.files().then(res => {
        let hreLocal="";
        hreLocal = res.data.data.url;
        this.downloadByBlob(hreLocal,"pic")

      });
    },
아래 의 이 방법 은 직접 가 져 가서 사용 할 수 있 습 니 다.당신 의 그림 url 을 이 방법 에 직접 전달 하면 vue.js 를 실현 하여 그림 을 다운로드 할 수 있 습 니 다.

downloadByBlob(url,name) {
    let image = new Image()
    image.setAttribute('crossOrigin', 'anonymous')
    image.src = url
    image.onload = () => {
      let canvas = document.createElement('canvas')
      canvas.width = image.width
      canvas.height = image.height
      let ctx = canvas.getContext('2d')
      ctx.drawImage(image, 0, 0, image.width, image.height)
      canvas.toBlob((blob) => {
        let url = URL.createObjectURL(blob)
        download(url,name)
        //     URL  
        URL.revokeObjectURL(url)
      })
    }
  },
호출 된 download(url,name)방법:

function download(href, name) {
  let eleLink = document.createElement('a')
  eleLink.download = name
  eleLink.href = href
  eleLink.click()
  eleLink.remove()
}
위의 코드 를 완성 하면 그림 탐색 이 아니 라 그림 다운 로드 를 실현 할 수 있 습 니 다.
마지막 으로 클릭 을 성공 적 으로 실현 하면 그림 을 다운로드 할 수 있 습 니 다.효과 도 는 다음 과 같 습 니 다.

vue.js 가 이미지 url 에 따라 이미지 다운로드 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue.js 이미지 url 에 관 한 이미지 다운로드 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
opencv 외부 윤곽 추출 및 외부 사각형 상자 추가
OpenCV 는 그림 에 테두리 기능 을 추가 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage