我无法通过服务器的外部文件加载贴纸。出现此错误。
我在 photoeditorreactui.js 中添加了下面突出显示的代码
// Then post-processing
'radial-focus', 'linear-focus', 'sprite', 'border', 'watermark'],
controlsOptions: {
sticker: {
stickersJSONPath: 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers.json?jsoncallback=?', // Treated as JSONP request
replaceStickers: false // `additionalStickers` replaces all other stickers
}
}
});
my stickers json file is this. i tried different format but none is working. evertime it shows loading.... then shows timeout error.. i changed timeout to 85 seconds from 5 seconds then also it is giving timeout error of 5 seconds and not loading stickers from external source. stickers.json is in same server as all files.
stickers.json file
[
{
'name': 'glasses',
'label': 'Glasses',
'stickers': [{
'name': 'glasses-nerd',
'label': 'Nerd glasses',
'images': {
'mediaThumb': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/thumb/glasses-nerd.png',
'width': 100,
'height': 100
},
'mediaBase': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/base/glasses-nerd.png',
'width': 221,
'height': 91
}
}
}, {
'name': 'glasses-normal',
'label': 'Normal glasses',
'images': {
'mediaThumb': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/thumb/glasses-normal.png',
'width': 100,
'height': 100
},
'mediaBase': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/base/glasses-normal.png',
'width': 249,
'height': 87
}
}
}, {
'name': 'glasses-shutter-green',
'label': 'Green shutter glasses',
'images': {
'mediaThumb': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/thumb/glasses-shutter-green.png',
'width': 100,
'height': 100
},
'mediaBase': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/base/glasses-shutter-green.png',
'width': 235,
'height': 89
}
}
}, {
'name': 'glasses-shutter-yellow',
'label': 'Yellow shutter glasses',
'images': {
'mediaThumb': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/thumb/glasses-shutter-yellow.png',
'width': 100,
'height': 100
},
'mediaBase': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/base/glasses-shutter-yellow.png',
'width': 236,
'height': 89
}
}
}, {
'name': 'glasses-sun',
'label': 'Sun glasses',
'images': {
'mediaThumb': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/thumb/glasses-sun.png',
'width': 100,
'height': 100
},
'mediaBase': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/base/glasses-sun.png',
'width': 250,
'height': 87
}
}
}]
}, {
'name': 'hats',
'label': 'Hats',
'stickers': [{
'name': 'hat-cap',
'label': 'Cap',
'images': {
'mediaThumb': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/thumb/hat-cap.png',
'width': 100,
'height': 100
},
'mediaBase': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/base/hat-cap.png',
'width': 237,
'height': 189
}
}
}, {
'name': 'hat-cylinder',
'label': 'Cylinder',
'images': {
'mediaThumb': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/thumb/hat-cylinder.png',
'width': 100,
'height': 100
},
'mediaBase': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/base/hat-cylinder.png',
'width': 225,
'height': 176
}
}
}, {
'name': 'hat-party',
'label': 'Party hat',
'images': {
'mediaThumb': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/thumb/hat-party.png',
'width': 100,
'height': 100
},
'mediaBase': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/base/hat-party.png',
'width': 140,
'height': 226
}
}
}, {
'name': 'hat-sheriff',
'label': 'Sheriff hat',
'images': {
'mediaThumb': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/thumb/hat-sheriff.png',
'width': 100,
'height': 100
},
'mediaBase': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/base/hat-sheriff.png',
'width': 251,
'height': 129
}
}
}]
}, {
'name': 'beards',
'label': 'Beards',
'stickers': [{
'name': 'mustache-long',
'label': 'Long mustache',
'images': {
'mediaThumb': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/thumb/mustache-long.png',
'width': 100,
'height': 100
},
'mediaBase': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/base/mustache-long.png',
'width': 199,
'height': 182
}
}
}, {
'name': 'mustache1',
'label': 'Brown mustache',
'images': {
'mediaThumb': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/thumb/mustache1.png',
'width': 100,
'height': 100
},
'mediaBase': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/base/mustache1.png',
'width': 238,
'height': 106
}
}
}, {
'name': 'mustache2',
'label': 'Black mustache',
'images': {
'mediaThumb': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/thumb/mustache2.png',
'width': 100,
'height': 100
},
'mediaBase': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/base/mustache2.png',
'width': 250,
'height': 82
}
}
}, {
'name': 'mustache3',
'label': 'Brown mustache',
'images': {
'mediaThumb': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/thumb/mustache3.png',
'width': 100,
'height': 100
},
'mediaBase': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/base/mustache3.png',
'width': 250,
'height': 94
}
}
}]
}, {
'name': 'misc',
'label': 'Misc',
'stickers': [{
'name': 'heart',
'label': 'Heart',
'images': {
'mediaThumb': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/thumb/heart.png',
'width': 100,
'height': 100
},
'mediaBase': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/base/heart.png',
'width': 185,
'height': 174
}
}
}, {
'name': 'pipe',
'label': 'Pipe',
'images': {
'mediaThumb': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/thumb/pipe.png',
'width': 100,
'height': 100
},
'mediaBase': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/base/pipe.png',
'width': 240,
'height': 112
}
}
}, {
'name': 'snowflake',
'label': 'Snow flake',
'images': {
'mediaThumb': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/thumb/snowflake.png',
'width': 100,
'height': 100
},
'mediaBase': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/base/snowflake.png',
'width': 204,
'height': 171
}
}
}, {
'name': 'star',
'label': 'Star',
'images': {
'mediaThumb': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/thumb/star.png',
'width': 100,
'height': 100
},
'mediaBase': {
'uri': 'http://xxxxxx.com/yyyy/photo-editor/assets/stickers/base/star.png',
'width': 201,
'height': 191
}
}
}]
}]
尝试了所有可能的 json 格式，但没有一个有效，如果有人有使用 img.ly sdk 的经验，那就太好了。
https://www.photoeditorsdk.com/documentation/html5/editor/customization/sticker#stickers-json-schema
这是文档。
我在这里尝试