다운로드 사진 프런트 엔드 요약

다운로드 사진 프런트 엔드 요약

프런트 엔드 다운로드 사진은 두 가지 범주로 나누어 : 실현에 하나 개의 서버 (인, 다운로드 자원을 제공하는 백 오피스 서비스), 두 번째는 순수 프런트 엔드로 다운로드

1 실현하여 서버

이 경우를 들어, 개발의 프론트 엔드는 매우 간단 같은 단지 레이블을 필요 :

<a href='/api/download' >下载图片</a>

파일이 직접 액세스 할 때 파일이 바이너리이고, 다른 브라우저가 파일을 확인할 수없는 경우, 브라우저는 파일을 다운로드하지만, 브라우저가 파일을 직접 분석 할 수 있다면, 파일을 열고 자신에 대한 것입니다 방법 알아 제시하지만 다운로드하지, 당신은 단순한 개방이 아니라 파일을 다운로드 브라우저 요구 사항을 알려주는 메시지 응답 헤더를 설정해야합니다.
이 시간 무대는 서비스 요청 및 파일을 다운로드 브라우저 요구 사항을 말할 메시지를 설정 응답 헤더를 얻을 수 있습니다. 노드, 예를 들면 :

app.get('/api/download/', (req, res, next) => {//以文件流的形式下载文件
    var filePath = path.join(__dirname, '../src/images/erwei.jpg');
    var stats = fs.statSync(filePath);
    res.set({
        'Content-Type': 'application/octet-stream', //告诉浏览器这是一个二进制文件
        'Content-Disposition': 'attachment; filename=111', //告诉浏览器这是一个需要下载的文件
        'Content-Length': stats.size  //文件大小
    });
    fs.createReadStream(filePath).pipe(res);
});

2, 순수 프런트 엔드 다운로드

어느 두 가지 상황으로 나누어 져 있습니다 : 먼저, (프로젝트의 폴더에있는 사진 파일) 원본 사진을 다운로드, 두 번째는 (예 : 회사의 CDN 정적 자원 등) 정적 자원 크로스 도메인 웹 사이트

가. 원본 사진을 다운로드

이러한 상황은 예를 들어 달성 할 수있는 간단한 레이블 downlaod의 사용이다 :

<a href=‘../img/test.png’ download="img" >下载图片</a>

나. URL이 사이트의 이미지를 다운로드하려면

캔버스, 케이스와

// 调用方式
// 参数一： src
// 参数二： 图片名称，可选
export const downloadImage = (src: string, name: string) => {
    const image = new Image();
    // 解决跨域 canvas 污染问题
    image.setAttribute('crossOrigin','anonymous');
    image.onload = function(){
      const canvas = document.createElement('canvas');
      canvas.width = image.width;
      canvas.height = image.height;
      const context = canvas.getContext('2d');
      context.drawImage(image,0,0,image.width,image.height);
      const url = canvas.toDataURL('image/png');
      // 生成一个 a 标签
      const a = document.createElement('a');
      // 创建一个点击事件
      const event = new MouseEvent('click');
      // 将 a 的 download 属性设置为我们想要下载的图片的名称，若 name 不存在则使用'图片'作为默认名称
      a.download = name || '图片';
      // 将生成的 URL 设置为 a.href 属性
      a.href = url;
      // 触发 a 的点击事件
      a.dispatchEvent(event);
    };
    image.src = src
}