Question

尽管Cytoscape.js支持节点中的背景图像，但我无法显示没有CORS（跨源-资源共享）标头的图像。 Chrome抛出以下错误。

Access to image at 'https://cdn2-www.dogtime.com/assets/uploads/gallery/goldendoodle-dog-breed-pictures/puppy-4_1.jpg'
from origin 'https://null.jsbin.com' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是我要访问的图像-

但是，如果我尝试使用d3.js在节点中显示与背景相同的图像，则会显示该图像。

Cytoscape.js

var cy;
window.addEventListener('DOMContentLoaded', function() {

  cy = cytoscape({
    container: document.getElementById('cy'),

    style: cytoscape.stylesheet()
      .selector('node')
      .css({
        'height': 60,
        'width': 60,
        'background-fit': 'cover',
        'border-color': '#000',
        'border-width': 1,
        'label': 'data(label)'
      })
      .selector('edge')
      .css({
        'width': 2,
        'line-color': '#ffaaaa',
        'target-arrow-color': '#ffaaaa',
        'curve-style': 'bezier',
      })
      .selector('#puppy')
      .css({
        'background-image': 'https://cdn2-www.dogtime.com/assets/uploads/gallery/goldendoodle-dog-breed-pictures/puppy-4_1.jpg'
      })
      .selector('#cat')
      .css({
        'background-image': 'https://farm2.staticflickr.com/1261/1413379559_412a540d29_b.jpg'
      }),

    elements: {
      nodes: [{
          data: {
            id: 'cat',
            label: 'Images are supported'
          }
        },
        {
          data: {
            id: 'puppy',
            label: 'Desired image not being shown'
          }
        },
      ],
      edges: [{
        data: {
          source: 'cat',
          target: 'puppy',
          label: 'puppy'
        }
      }]
    },
    layout: {
      name: 'circle'
    }
  }); // cy init


});

body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 70%;
  width: 100%;
  position: absolute;
  left: 100;
  top: 100;
}

<head>
  <link href="style.css" rel="stylesheet" />
  <meta charset=utf-8 />
  <!--
Created using JS Bin
http://jsbin.com

Copyright (c) 2018 by maxkfranz (http://jsbin.com/teworah/3/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
  <meta name="robots" content="noindex">
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
  <title>Images</title>
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>

</head>

<body>

  <div id="cy"></div>

</body>

d3.js

var config = {
  "avatar_size": 100
}

var body = d3.select("body");

var svg = body.append("svg")
  .attr("width", 500)
  .attr("height", 500);

var defs = svg.append('svg:defs');

data = [{
  posx: 100,
  posy: 100,
  img: "https://cdn2-www.dogtime.com/assets/uploads/gallery/goldendoodle-dog-breed-pictures/puppy-4_1.jpg",
}];


svg.append('clipPath')
  .attr('id', 'clipObj')
  .append('circle')
  .attr('cx', config.avatar_size)
  .attr('cy', config.avatar_size)
  .attr('r', config.avatar_size);

data.forEach(function(d, i) {
  svg.append('image')
    .attr('xlink:href', d.img)
    .attr('width', config.avatar_size)
    .attr('height', config.avatar_size)
    .attr('transform', 'translate(' + parseInt(d.posx + config.avatar_size / 2) + ',' + parseInt(d.posy + config.avatar_size / 2) + ')')
    .attr('clip-path', 'url(#clipObj)');

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>

Answer 1

在您的特定示例中，如果将crossOrigin设置为anonymous无效，但是如果未设置（即null），则可以正常工作

默认情况下，Cytoscape.js将图像的crossOrigin字段设置为anonymous see the doc。无法将其设置为null。

但是如果您仍然愿意，可以使用源代码：将crossOrigin字段设置为null here将显示此特定图像。

在此JsFiddle中，如果将原点设置为null，则可以使用，但是将其设置为anonymous则无效。

P.S：如果需要，还可以在开发人员工具的“网络”标签中运行代码段并分析响应和请求标头。在Firefox中，您可以编辑标题，重新发送请求，并查看它如何影响响应。

为什么跨域图像请求被Cytoscape.js阻止，而未被d3.js阻止？

1 个答案: