Binding Picture Source to data uri

GoJS
1

Hi,

go.Picture.source can render data uri.
So, I tryed to change source using binding. but it’s not wroking.

How to change picture.source using data uri?

code:

var GO = go.GraphObject.make;
GO(go.Node, ‘Spot’,
{
selectionAdornmentTemplate: makeSelectionAdornmentTemplate(),
resizeAdornmentTemplate: makeResizeAdornmentTemplate(),
rotateAdornmentTemplate: makeRotateAdornmentTemplate(),
locationSpot: shapeLocationSpot,
locationObjectName: ‘OBJSHAPE’,
selectionAdorned: false,
resizeObjectName: ‘OBJSHAPE’,
resizable: true,
layerName: “Layer1”,
},
new go.Binding(‘location’, ‘loc’, go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding(‘layerName’, ‘layer’).makeTwoWay(),
GO(go.Picture,
{ name: ‘OBJSHAPE’,
width: 100, height: 100, margin: 0, background: “white”,
imageStretch: go.GraphObject.UniformToFill,
angle: 0,
source: ‘data:image/png;base64,iVBORw0K…’,
portId: ‘’,
fromLinkable: true, fromLinkableSelfNode: false, fromLinkableDuplicates: true,
toLinkable: true, toLinkableSelfNode: false, toLinkableDuplicates: true
},
new go.Binding(‘source’),
new go.Binding(‘angle’, ‘angle’).makeTwoWay(),
new go.Binding(‘desiredSize’, ‘size’, go.Size.parse).makeTwoWay(go.Size.stringify)
)
);

$(’#nn_picture’).change(changePicure);

function changePicure(evt) {
var file = evt.target.files[0];
if (!file.type.match(‘image.*’)) {
return;
}
var reader = new FileReader();
reader.onloadend = function(encodedFile) {
myDiagram.model.startTransaction(‘change_Picture’);
$.each(myDiagram.selection.toArray(), function(key,data) {
if (‘Picture’ == data.category) {
myDiagram.model.setDataProperty(data,‘source’,encodedFile.srcElement.result);
}
});
myDiagram.model.commitTransaction(‘change_Picture’);
};
reader.readAsDataURL(file);
}

console messages are below:

GraphLinksModel.setDataProperty is modifying a GraphObject, “Node#21738(Picture)” go.js:17
Is that really your intent?

Thanks,

2

Actually, the error message gives a good clue: the value of the “data” variable is a Node, not the Node.data that one would expect to pass to Model.setDataProperty.

Furthermore, have you examined the value of encodedFile.srcElement.result in the debugger?

Also, why are you using the onloadend event rather than implementing separate onload and onerror events?

As a separate comment, it would be better to write your loop within the transaction as follows:

myDiagram.selection.each(function(part) { if (part.category === "Picture") { myDiagram.model.setDataProperty(part.data, "source", ...); } });