从服务器Angular 2下载文件
从服务器Angular 2下载文件
提问于 2017-12-12 19:29:16
我有一个代码来转换图像为dataUrl
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.我怎么才能修复它呢？
回答 1
Stack Overflow用户
发布于 2017-12-12 20:37:57
您不能从客户端代码下载该文件，因为执行您的代码的浏览器代表远程服务器强制执行不跨域策略。您必须对Google服务器应用更改，才能从Google服务器请求URL。
你能做的就是让你自己的后端下载文件(使用curl或者你手头上的任何东西)，然后在那里转换或者循环到你的前端。
例如，您可以有一个四行代码的php脚本(或后端技术中的等效函数)，用于遍历：
<?php
header("Content-type: image/png");
echo(readfile("https://www.google.de/images/srpr/logo11w.png"));
?>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47771553
复制相关文章
相似问题
腾讯云开发者
