파일 다운로드 2

나는이 기능을 dataUrl파일 다운로드 2

convertToDataURLviaCanvas(url, outputFormat){ 
return new Promise((resolve, reject) => { 
    const img = new Image(); 
    img.crossOrigin = 'anonymous'; 
    img.onload =() => { 
    let canvas = <HTMLCanvasElement> document.createElement('CANVAS'), 
     ctx = canvas.getContext('2d'), 
     dataURL; 
    canvas.height = img.height; 
    canvas.width = img.width; 
    ctx.drawImage(img, 0, 0); 
    dataURL = canvas.toDataURL(outputFormat); 
    resolve(dataURL); 
    canvas = null; 
    }; 
    img.src = url; 
});

}

과의 통화에

this.convertToDataURLviaCanvas('https://www.google.de/images/srpr/logo11w.png', 'image/jpeg').then(imageData => { 
    this.zip.file(image.file_name, imageData, {binary: true}) 

    this.zip.generateAsync({type: 'blob'}).then(content => { 
     saveAs(content, 'images.zip'); 
     }); 
})

을 이미지를 변환하는 코드를 가지고 있지만 CORS

에 오류가있다

Failed to load https://www.google.de/images/srpr/logo11w.png: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

어떻게 할 수 있습니까? 고침

출처

2017-12-12 Andre1991

이 google.de 서버가 허용하지 않는 것을 의미한다 Cross-Origin 요청에 대해서는 클라이언트 쪽에서 할 수있는 일이 없습니다. Google 서비스를 사용하려면 개발자 용 API를 통해 이동하십시오. – TruckDriver

한 가지 해킹 방법은 크롬의 경우 CORS 플러그인을 다운로드 할 수 있습니다. https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi? hl = en – TruckDriver

어쩌면 다른 방법으로 파일을 아카이브로 다운로드 할 수 있습니까? – Andre1991

코드를 실행하는 브라우저가 원격 서버를 대신하여 원본이없는 정책을 적용하기 때문에 클라이언트 코드에서 해당 파일을 다운로드 할 수 없습니다. Google 서버에 URL을 요청하려면 Google 서버에 변경 사항을 적용해야합니다.

당신이 할 수있는 일은 자신 만의 백엔드가 파일을 다운로드하거나 (컬이나 다른 무엇을 가지고 있든간에) 파일을 다운로드하여 거기에 변환하거나 프론트 엔드로 반복하는 것입니다.

는 예를 들어, 당신이 루프 스루 사용 (백엔드 기술 또는 이에 상응하는 기능) 네 라이너 PHP 스크립트를 할 수 :

<?php 
header("Content-type: image/png"); 
echo(readfile("https://www.google.de/images/srpr/logo11w.png")); 
?>

출처

2017-12-12 12:37:57 Alexander

파일 다운로드 2

답변

관련 문제