Проблема добавления холста ( fabric.js) внутри iframe
Hello, please can someone help me solve the problem adding canvas with fabric.js inside an iframe. I have a button that allows me to add rectangles to a canvas. I created the canvas object with fabric.js that I added inside an iframe despite all the tests I did but it doesn't work. Can someone help me solve this problem please?
Ошибки, которые я получаю:
Ошибка 1:
Error 1VM6034:32Uncaught TypeError: Cannot read property 'add' of null at Add (<anonymous>:32:12) at HTMLButtonElement.onclick ((index):1)
Ошибка 2:
VM6034:36Uncaught TypeError: fabric.Control is not a constructor at <anonymous>:36:52 at Object.coreUtilsModule.executeScripts(coreUtils.js:304) atHTMLScriptElement.newScript.onload.newScript.onerror (coreUtils.js:288)
Что я уже пробовал:
<html><head> <meta charset="utf-8"/> <title>monfabrick</title> <script src="fabric.min.js"></script> <script type="text/javascript"> var iframeDocument = document.getElementById('myiframe').contentWindow.document; var canvas = iframeDocument.getElementById('c'); var fabricCanvas = new fabric.Canvas(canvas); //var canvas = this.__canvas = new fabric.Canvas('c'); // create a rect object var deleteIcon = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E"; var img = document.createElement('img'); img.src = deleteIcon; fabric.Object.prototype.transparentCorners = false; fabric.Object.prototype.cornerColor = 'blue'; fabric.Object.prototype.cornerStyle = 'circle'; function Add() { var rect = new fabric.Rect({ left: 100, top: 50, fill: 'yellow', width: 200, height: 100, objectCaching: false, stroke: 'lightgreen', strokeWidth: 4, }); canvas.add(rect); canvas.setActiveObject(rect); } fabric.Object.prototype.controls.deleteControl = new fabric.Control({ x: 0.5, y: -0.5, offsetY: 16, cursorStyle: 'pointer', mouseUpHandler: deleteObject, render: renderIcon, cornerSize: 24 }); Add(); function deleteObject(eventData, target) { var canvas = target.canvas; canvas.remove(target); canvas.requestRenderAll(); } function renderIcon(ctx, left, top, styleOverride, fabricObject) { var size = this.cornerSize; ctx.save(); ctx.translate(left, top); ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle)); ctx.drawImage(img, -size/2, -size/2, size, size); ctx.restore(); } </script> <style type="text/css" > .controls { display: inline-block; } </style> </head> <body> <div class="controls"> <p> <button id="add" onclick="Add()">Add a rectangle</button> </p> </div> <iframe id="myiframe" width="400" height="400" src="http://localhost:7007/mapage/" name="moniframe" contenteditable="true" class="embed-responsive-item" allowfullscreen> </iframe> </body></html>