問題CANVAS DOMデータを読み取る

Question

したがって、次のキャンバス要素オブジェクトのbackgroundImage.src値にアクセスしようとしています。使用できません。

私は背景色に完全にアクセスできます。すなわちobject.backgroundColor。 backgroundImage srcを取得できません。

私はobject.backgroundImage.src、object['backgroundImage']['src']、さらにはobject['backgroundImage.src']を試しました。

ダイスはありません。私はここでどこが間違っていますか？

JSONは、キャンバスオブジェクトを作成すること、データベースからプル：

{"objects":[{"type":"i-text","originX":"left","originY":"top","left":71.61,"top":237.86,"width":395.77,"height":63.28,"fill":"#FFF","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"Oh. You need a little dummy text\nfor your mockup? How quaint.","fontSize":28,"fontWeight":"300","fontFamily":"Roboto, sans-serif","fontStyle":"","lineHeight":1,"textDecoration":"","textAlign":"center","textBackgroundColor":"","charSpacing":0,"styles":{}}],"background":"#CCC","backgroundImage":{"type":"image","originX":"center","originY":"center","left":270,"top":270,"width":812.54,"height":540,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"crossOrigin":"anonymous","alignX":"none","alignY":"none","meetOrSlice":"meet","src":"https://pixabay.com/get/e837b90f2df7063ed95c4518b74d4495e073e3d504b0154994f7c679a0eeb4_960.jpg","filters":[{"type":"Tint","color":"#59ABE3","opacity":0.5}],"resizeFilters":[]}} 

Answer 1

var x = JSON.parse('{\"objects\":[{\"type\":\"i-text\",\"originX\":\"left\",\"originY\":\"top\",\"left\":71.61,\"top\":237.86,\"width\":395.77,\"height\":63.28,\"fill\":\"#FFF\",\"stroke\":null,\"strokeWidth\":1,\"strokeDashArray\":null,\"strokeLineCap\":\"butt\",\"strokeLineJoin\":\"miter\",\"strokeMiterLimit\":10,\"scaleX\":1,\"scaleY\":1,\"angle\":0,\"flipX\":false,\"flipY\":false,\"opacity\":1,\"shadow\":null,\"visible\":true,\"clipTo\":null,\"backgroundColor\":\"\",\"fillRule\":\"nonzero\",\"globalCompositeOperation\":\"source-over\",\"transformMatrix\":null,\"skewX\":0,\"skewY\":0,\"text\":\"Oh. You need a little dummy text\\nfor your mockup? How quaint.\",\"fontSize\":28,\"fontWeight\":\"300\",\"fontFamily\":\"Roboto, sans-serif\",\"fontStyle\":\"\",\"lineHeight\":1,\"textDecoration\":\"\",\"textAlign\":\"center\",\"textBackgroundColor\":\"\",\"charSpacing\":0,\"styles\":{}}],\"background\":\"#CCC\",\"backgroundImage\":{\"type\":\"image\",\"originX\":\"center\",\"originY\":\"center\",\"left\":270,\"top\":270,\"width\":812.54,\"height\":540,\"fill\":\"rgb(0,0,0)\",\"stroke\":null,\"strokeWidth\":0,\"strokeDashArray\":null,\"strokeLineCap\":\"butt\",\"strokeLineJoin\":\"miter\",\"strokeMiterLimit\":10,\"scaleX\":1,\"scaleY\":1,\"angle\":0,\"flipX\":false,\"flipY\":false,\"opacity\":1,\"shadow\":null,\"visible\":true,\"clipTo\":null,\"backgroundColor\":\"\",\"fillRule\":\"nonzero\",\"globalCompositeOperation\":\"source-over\",\"transformMatrix\":null,\"skewX\":0,\"skewY\":0,\"crossOrigin\":\"anonymous\",\"alignX\":\"none\",\"alignY\":\"none\",\"meetOrSlice\":\"meet\",\"src\":\"https:\/\/pixabay.com\/get\/e837b90f2df7063ed95c4518b74d4495e073e3d504b0154994f7c679a0eeb4_960.jpg\",\"filters\":[{\"type\":\"Tint\",\"color\":\"#59ABE3\",\"opacity\":0.5}],\"resizeFilters\":[]}}'); 

console.log(x.backgroundImage.src); 

プリントアウトhttps://pixabay.com/get/e837b90f2df7063ed95c4518b74d4495e073e3d504b0154994f7c679a0eeb4_960.jpg