Question

我有一个代码将图像转换为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.

我该如何解决？

Answer 1

您无法从客户端代码下载该文件，因为执行代码的浏览器代表远程服务器强制执行无跨域策略。您必须将更改应用于Google服务器才能从Google服务器请求网址。

你可以做的就是让你自己的后端下载文件（使用卷曲或你手边的任何东西），然后将其转换或循环到你的前端。

例如，您可以使用四线PHP脚本（或后端技术中的等效功能），用于循环：

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

从服务器Angular 2下载文件

1 个答案: