Missing Image

by InferOn

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js"></script>
<canvas id="my-canvas"></canvas>
<button id="load-canvas">Load Canvas</button>

CSS

button {
	border: 0 none;
	background: #fff;
	border-radius: 5px;
	cursor: pointer;
	color: #333;
	box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
	text-transform: uppercase;
	padding: 11px 22px;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 1px;
	margin: 10px auto;
	outline: 0 none;
}

JavaScript

var canvas = new fabric.Canvas();
var el = document.getElementById('my-canvas');
var button = document.getElementById('load-canvas');

json = {"objects":[{"type":"rect","originX":"center","originY":"center","left":300,"top":300,"width":300,"height":300,"fill":"rgba(255,255,255, 1)","stroke":"rgba(17,17,17,1)","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,"rx":0,"ry":0},{"alignX":"none","alignY":"none","angle":0,"backgroundColor":"","crossOrigin":"Anonymous","fill":"rgb(0,0,0)","fillRule":"nonzero","filters":[{"brightness":90,"type":"Brightness"}], "flipX":false,"flipY":false,"globalCompositeOperation":"source-over","height":413,"itemTitle":"Image layer","left":540,"meetOrSlice":"meet","objType":"item","opacity":1,"originX":"center","originY":"center","scaleX":1,"scaleY":1,"skewX":0,"skewY":0,"src":"https://upload.wikimedia.org/wikipedia/commons/c/c2/Pick-Up_by_Frank_Uppwall_1955.jpg","strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"strokeWidth":0,"timestamp":1482499319,"top":540,"type":"image","uuid":"e4bc4d00-af88-4c4a-8d28-c0bea7da2d57","visible":true,"width":335}],"background":"#FFFFFF"}


var loadCanvas = function() {
	canvas.dispose();

	canvas.initialize(el, {
		width: 600,
		height: 600
	});
	canvas.loadFromJSON( JSON.stringify(json), canvas.renderAll.bind(canvas) );
};

button.addEventListener( 'click', loadCanvas );