Your node definition looks OK.
Your package.json file does not show how you are calling cors as middleware.
oh, can you please help me, how do i initiate the call in package.json file for cors.
Regards
Nageswar
Have you read the documentation for that package? That tells you how to call it for several different scenarios. It also wouldn’t hurt to learn about Express middleware.
Also, if you have read the general description for CORS, I hope the web server that you are modifying to support CORS requests for images is running on the domain that is serving those images, not your app’s web server.
I gone through the documentation, nowhere its explained about the angular part, i got the following the reference to add update the configurations:
But in my sample project i am not using any web api/services to configure with. even i downloaded the code(html and js) from the given path:
In this only the “sourceCrossOrigin: function(pict) { return “anonymous”; }” is available, otherthan this cors related configuration is not available.
note: we are trying to use images which are available in the my local system, not using any URL based image like https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/NASA_Mars_Rover.jpg/225px-NASA_Mars_Rover.jpg. In this case also do i need use CORS Configuration?
Please provide any angular related sample for reference.
Thanks & Regards
Nageswar
It is the web server that is delivering the image files that needs to enable CORS. I thought you were trying to do that because your images are on a different server that is implemented using Node.js Express, which is the only reason to import the cors package from npm.
So you need to set up your local web server to deliver those local image files. But then they will probably be coming from the same domain, so you won’t have any Cross-Origin Resource Sharing security problem.
Please check the following code which i have used :
function init() {
if (window.goSamples) goSamples(); // init for these samples – you don’t need to call this
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram = $(go.Diagram, "myDiagramDiv", { });
// define a simple Node template
myDiagram.nodeTemplate =
$(go.Node, "Vertical",
$(go.Shape, "RoundedRectangle", { width: 15, height: 15, strokeWidth: 0, fill: "red" },
new go.Binding("fill", "color")),
$(go.Picture, "http://localhost/aspnet_client/process_api.png", {
width: 50, height: 50, background: 'lime',
//sourceCrossOrigin: function(pict) { return "anonymous"; }
} )
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: "Alpha", color: "lightblue" },
{ key: "Beta", color: "orange" },
{ key: "Gamma", color: "lightgreen" },
{ key: "Delta", color: "pink" }
],
[
]);
document.getElementById('b1').addEventListener('click', function() {
document.body.appendChild(myDiagram.makeImage());
})
}
init();
output is coming as :
Is your page also being served from localhost and using HTTP? Otherwise it would obviously be a different origin, because origin means the combination of protocol, host name, and port number.
I had just edited my response to be more precise, and that may have stated what the problem is – you aren’t using the same port number.
Hi ,
For the above mention image path “http://localhost/aspnet_client/process_api.png”, i added the image in default website folder, that is “C:\inetpub\wwwroot\aspnet_client”.
But I am not getting for the case of specific port, how to add and refer the required images to http://localhost:4200/
And also i tried by referring the images from Application’s assets folder as below:
Keeping the images in application local folder as “./assets/Image/process_api.png” and referring in the template as
this.diagram.nodeTemplate =
$(go.Node, “Vertical”,
new go.Binding(“location”, “loc”, go.Point.parse),
$(go.Shape, “RoundedRectangle”, { width: 15, height: 15, strokeWidth: 0, fill: “red” },
new go.Binding(“fill”, “color”)),
$(go.Picture, "./assets/Image/process_api.png",
{
width: 68, height: 47, background: 'lime',
} )
);
and
in angular.json file the assets folder is configured as
“my-app”: {
“root”: “”,
“sourceRoot”: “src”,
“projectType”: “application”,
“architect”: {
“build”: {
“builder”: “@angular-devkit/build-angular:browser”,
“options”: {
“outputPath”: “dist”,
“index”: “src/index.html”,
“main”: “src/main.ts”,
“tsConfig”: “src/tsconfig.app.json”,
“polyfills”: “src/polyfills.ts”,
“assets”: [
“src/assets”,
“src/favicon.ico”
],
“styles”: [
“src/styles.css”
],
“scripts”: []
}
With this local images and configuration needed Image is getting loaded in the diagram, but not exporting.
Yes, that would be a security violation, according to the CORS rules. You will need to either enable CORS for those images at the default port or refer to those images on port 4200.
Any idea on the following case?
For the above mention image path “http://localhost/aspnet_client/process_api.png”, i added the image in default website folder, that is “C:\inetpub\wwwroot\aspnet_client”.
But I am not getting for the case of specific port, how to add and refer the required images to http://localhost:4200/
Use relative instead of absolute paths. When serving a page from localhost:4200 you should fetch the images from the same. In this case you can use
"aspnet_client/process_api.png"
As the path, if you’re only serving on the localhost index.
Hi simon,
We tried all the way to export diagram with images with your suggestions, but we couldn’t succeeded. If you can provide us a sample which is helpful for us to export with diagram with respect angular. As of now all the diagram related features are working except export of diagram with images. but in our product export is one of the major feature. Without that we cant proceed with Gojs diagrams.
Thanks & Regards
Nageswar
What is the URL that you are now using as the Picture.source?
same issue with angular !
If the images are served locally, this shouldn’t be a problem.
If not, it’s a CORS issue, and you’ll need to either change how those files are shared or specify sourceCrossOrigin in your go.Picture element.
I just tried modifying the nodeTemplate from the gojs-angular-basic sample by adding a Picture element like this:
$(go.Picture, {
source: "https://placekitten.com/200/300",
sourceCrossOrigin: function(pict) { return "anonymous"; }
}),
Diagram.makeImageData works just fine.
1 Like
thank you ryanj for your reply
i tried your code and it’s works fine !
so i found the issue is related to uppercase letters in the url :
for gojs bad url :
https://localhost:5001/Resources/Images/Components/1639026002.jpg
working url:
https://localhost:5001/resources/images/components/1639026002.jpg
i don’t know why gojs not working with the both urls !
my solution :
adding new go.Binding(“source”, “img”,function(s) { return s.toLowerCase(); }),
Domain names are case insensitive.
URIs or URLs are generally case-sensitive. That is because the web server processing the whole request gets to decide exactly how to treat the letters that are beyond the domain part of the URL or URI.
So if part of your URL is referring to a file on the web server’s file system, the case may matter.