Question

我正在尝试使用Image API获取图片网址的图片数据/扩展名。

我可以轻松地使用正则表达式从{domain} .com / path-to-image.jpg这样的名称扩展到文件扩展名，但是对于图像网址如何：http://placekitten.com/g/1000/1000

我正在尝试为该位置的图像数据获取dataUrl。这是需要此数据的代码的特定部分。你现在可以看到我很难编码'image / png'。

  _getDataUri(url, callback) {
    const props = this.props;
    const img = new Image();
    img.setAttribute('crossOrigin', 'anonymous');

    img.onload = function onLoadedImage() {
      const {minHeight, minWidth} = props.opt;
      const [width, height] = [img.width, img.height];

      const canvas = document.createElement('canvas');
      canvas.width = this.width;
      canvas.height = this.height;

      const ctx = canvas.getContext('2d');
      ctx.drawImage(this, 0, 0);

      const dataUrl = canvas.toDataURL('image/png');
      callback({
        dataUrl,
        height,
        minHeight,
        minWidth,
        width
      });
    };

    img.onerror = function onImageError() {
      props.opt.onModalClose();
      props.opt.onChangeCardStatus('invalidImage');
    };

    img.src = url;
  }

*更新* 获取api不会解决此问题，因为如果禁用cors，它将不会产生可读的响应。

Answer 1

您可以使用fetch()，Response.blob()，FileReader.prototype.readAsDataURL()

fetch("http://placekitten.com/g/1000/1000")
.then(response => response.blob())
.then(blob => {
  console.log(blob.type);
  let reader = new FileReader();
  reader.onload = () => {
    console.log(reader.result)
  }
  reader.readAsDataURL(blob) 
})

如何从URL中不包含图像扩展名的远程图像URL获取图像扩展名

1 个答案: