javascript - origin - En el siguiente código, la capa de lienzo desaparece al hacer clic con el ratón en Fabric.js y Firefox deja de responder al crear lienzo a imagen.

img crossorigin

Question

http://jsfiddle.net/rodrigopandini/gj7HT/

Estoy usando este ejemplo para arrastrar y soltar imágenes desde mi computadora al lienzo usando Fabric.js.

//Drag and Drop Image
                        var canvas = new fabric.Canvas(''c'');
                        function handleDragStart(e) {
                            [].forEach.call(images, function (img) {
                                img.classList.remove(''img_dragging'');
                            });
                            this.classList.add(''img_dragging'');
                        }

                        function handleDragOver(e) {
                            if (e.preventDefault) {
                                e.preventDefault(); // Necessary. Allows us to drop.
                            }

                            e.dataTransfer.dropEffect = ''copy''; // See the section on the DataTransfer object.
                            // NOTE: comment above refers to the article (see top) -natchiketa

                            return false;
                        }

                        function handleDragEnter(e) {
                            // this / e.target is the current hover target.
                            this.classList.add(''over'');
                        }

                        function handleDragLeave(e) {
                            this.classList.remove(''over''); // this / e.target is previous target element.
                        }

                        function handleDrop(e) {
                            // this / e.target is current target element.

                            /*
                            if (e.stopPropagation) {
                                e.stopPropagation(); // stops the browser from redirecting.
                            }
                            */

                            e.stopPropagation(); // Stops some browsers from redirecting.
                            e.preventDefault(); // Stops some browsers from redirecting.

                            // handle desktop images
                            if (e.dataTransfer.files.length > 0) {

                                var files = e.dataTransfer.files;
                                for (var i = 0, f; f = files[i]; i++) {

                                    // Only process image files.
                                    if (f.type.match(''image.*'')) {
                                        // Read the File objects in this FileList.
                                        var reader = new FileReader();
                                        // listener for the onload event
                                        reader.onload = function (evt) {
                                            // create img element
                                            var img = document.createElement(''img'');
                                            img.src = evt.target.result;

                                            // put image on canvas
                                            var newImage = new fabric.Image(img, {
                                                width: img.width,
                                                height: img.height,
                                                // Set the center of the new object based on the event coordinates relative to the canvas container.
                                                left: e.layerX,
                                                top: e.layerY
                                            });
                                            canvas.add(newImage);
                                        };
                                        // Read in the image file as a data URL.
                                        reader.readAsDataURL(f);
                                    }
                                }
                            }
                                // handle browser images
                            else {
                                var img = document.querySelector(''#images img.img_dragging'');
                                var newImage = new fabric.Image(img, {
                                    width: img.width,
                                    height: img.height,
                                    // Set the center of the new object based on the event coordinates relative to the canvas container.
                                    left: e.layerX,
                                    top: e.layerY
                                });
                                canvas.add(newImage);
                            }

                            return false;
                        }

                        function handleDragEnd(e) {
                            // this/e.target is the source node.
                            [].forEach.call(images, function (img) {
                                img.classList.remove(''img_dragging'');
                            });
                        }

                        if (Modernizr.draganddrop) {
                            // Browser supports HTML5 DnD.

                            // Bind the event listeners for the image elements
                            var images = document.querySelectorAll(''#images img'');
                            [].forEach.call(images, function (img) {
                                img.addEventListener(''dragstart'', handleDragStart, false);
                                img.addEventListener(''dragend'', handleDragEnd, false);
                            });
                            // Bind the event listeners for the canvas
                            var canvasContainer = document.getElementById(''canvas-container'');
                            canvasContainer.addEventListener(''dragenter'', handleDragEnter, false);
                            canvasContainer.addEventListener(''dragover'', handleDragOver, false);
                            canvasContainer.addEventListener(''dragleave'', handleDragLeave, false);
                            canvasContainer.addEventListener(''drop'', handleDrop, false);
                        } else {
                            // Replace with a fallback to a library solution.
                            alert("This browser doesn''t support the HTML5 Drag and Drop API.");
                        }
                        //End Drag and Drop

Para agregar varias imágenes arrastrando y soltando utilicé el código anterior (ejemplo jsfiddle). Aquí está mi código que funciona bien cuando agrego imágenes una por una en Canvas.

var $ = function (id) { return document.getElementById(id) };

                    //Upload Click 
                    var fileSelect = document.getElementById("fileSelect"),
                        upload = document.getElementById("upload");

                    fileSelect.addEventListener("click", function (e) {
                        if (upload) {
                            upload.click();
                        }
                        e.preventDefault(); // prevent navigation to "#"
                    }, false);
                    //End

                    function applyFilter(index, filter) {
                        var obj = canvas.getActiveObject();
                        obj.filters[index] = filter;
                        obj.applyFilters(canvas.renderAll.bind(canvas));
                    }

                    function applyFilterValue(index, prop, value) {
                        var obj = canvas.getActiveObject();
                        if (obj.filters[index]) {
                            obj.filters[index][prop] = value;
                            obj.applyFilters(canvas.renderAll.bind(canvas));
                        }
                    }

                    var canvas = new fabric.Canvas(''c''),

                        f = fabric.Image.filters;

                    //Canvas Events
                    canvas.on({
                        ''object:selected'': function () {
                            fabric.util.toArray(document.getElementsByTagName(''input''))
                                .forEach(function (el) {
                                    el.disabled = false;
                                })

                            //Check for already applied filter on Image after selecting an image
                            var filters = [''grayscale'', ''invert'', ''remove-white'', ''sepia'', ''sepia2'',
                                ''brightness'', ''noise'', ''gradient-transparency'', ''pixelate'',
                                ''blur'', ''sharpen''];

                            for (var i = 0; i < filters.length; i++) {
                                $(filters[i]).checked = !!canvas.getActiveObject().filters[i];
                            }
                            canvas._activeObject.bringToFront();
                        },

                        //''selection:cleared'': function() {
                        //        fabric.util.toArray(document.getElementsByTagName(''input''))
                        //            .forEach(function(el) { el.disabled = true; })                
                        //}                                        
                    });

                    var imageLoader = document.getElementById(''upload'');
                    imageLoader.addEventListener(''change'', handleImage, false);
                    var c = document.getElementById(''c'');
                    var context = canvas.getContext(''2d'');

                    //Canvas Handler
                    function handleImage(e) {
                        var reader = new FileReader();
                        reader.onload = function (event) {
                            var img = new Image();
                            img.onload = function () {
                                canvas.width = img.width;
                                canvas.height = img.height;
                                context.drawImage(img);

                            }
                            img.src = event.target.result;                     
                        }
                        reader.readAsDataURL(e.target.files[0]);
                    }

                    //Fabric.JS single image handler
                    document.getElementById(''upload'').onchange = function handleImage(e) {

                            var reader = new FileReader();
                            reader.onload = function(event) {
                                var imgObj = new Image();
                                imgObj.src = event.target.result;
                                imgObj.onload = function() {
                                    var image = new fabric.Image(imgObj);
                                    image.set({
                                        left: 250,
                                        top: 250,
                                        angle: 20,
                                        padding: 10,
                                        cornersize: 10,
                                    }).scale(0.4);
                                    canvas.add(image);
                                }
                            }
                            reader.readAsDataURL(e.target.files[0]);                            
                    }
                    //End

                    //Static Image in background
                    function setBackgrnd() {
                        fabric.Image.fromURL(''/2-road.jpg'', function (img) {
                            var oImg = img.set({ left: 400, top: 300, opactiy:0.5, selectable:false, lockHorizontally: false, lockVertically: false, lockScaling: false, lockRotation: false }).scale(1);
                            //oImg.filters.push(new fabric.Image.filters.blur());
                            //oImg.applyFilters(canvas.renderAll.bind(canvas));
                            //canvas.setBackgroundImage(''/2-road.jpg'', canvas.renderAll.bind(canvas));
                            canvas.add(oImg).renderAll();
                            canvas.setActiveObject(oImg);
                            canvas.sendToBack(oImg);
                            $(''#delBackgrnd'').click(function() {
                                canvas.getObjects();
                                remove(oImg);
                                canvas.renderAll();

                            });
                            //function setBackgrnd() {
                            //    canvas.add(oImg).renderAll();
                            //    canvas.setActiveObject(oImg);
                            //}

                            //function delBackgrnd() {
                            //    fxRemove(oImg, canvas.renderAll());
                            //}

                        });
                    }

                    //Clears Everything on Canvas
                    function clearCanvas() {
                        canvas.clear();
                    }

                    //Delete Background Image
                    function delBackgrnd() {                    
                        //SelectedObject.onclick = function () {
                        //    if (canvas.getActiveGroup()) {
                        //        canvas.getActiveGroup().forEachObject(function (o) { canvas.remove(o) });
                        //        canvas.discardActiveGroup().renderAll();
                        //    } else {
                        //        canvas.remove(canvas.getActiveObject());
                        //    }
                        //};


                    }

                    //Generate Collage
                    function convertCanvasToImage() {
                        //var canvas = document.getElementById(''c'');
                        canvas.deactivateAll().renderAll();
                        var image_src = canvas.toDataURL("image/jpeg");
                        //document.write(''<img src="'' + image_src + ''"/>'');
                        window.open(image_src);
                    }

                    //Drag and Drop Image
                    var canvas = new fabric.Canvas(''c'');
                    function handleDragStart(e) {
                        [].forEach.call(images, function (img) {
                            img.classList.remove(''img_dragging'');
                        });
                        this.classList.add(''img_dragging'');
                    }

                    function handleDragOver(e) {
                        if (e.preventDefault) {
                            e.preventDefault(); // Necessary. Allows us to drop.
                        }

                        e.dataTransfer.dropEffect = ''copy''; // See the section on the DataTransfer object.
                        // NOTE: comment above refers to the article (see top) -natchiketa

                        return false;
                    }

                    function handleDragEnter(e) {
                        // this / e.target is the current hover target.
                        this.classList.add(''over'');
                    }

                    function handleDragLeave(e) {
                        this.classList.remove(''over''); // this / e.target is previous target element.
                    }

                    function handleDrop(e) {
                        // this / e.target is current target element.

                        /*
                        if (e.stopPropagation) {
                            e.stopPropagation(); // stops the browser from redirecting.
                        }
                        */

                        e.stopPropagation(); // Stops some browsers from redirecting.
                        e.preventDefault(); // Stops some browsers from redirecting.

                        // handle desktop images
                        if (e.dataTransfer.files.length > 0) {

                            var files = e.dataTransfer.files;
                            for (var i = 0, f; f = files[i]; i++) {

                                // Only process image files.
                                if (f.type.match(''image.*'')) {
                                    // Read the File objects in this FileList.
                                    var reader = new FileReader();
                                    // listener for the onload event
                                    reader.onload = function (evt) {
                                        // create img element
                                        var img = document.createElement(''img'');
                                        img.src = evt.target.result;

                                        // put image on canvas
                                        var newImage = new fabric.Image(img, {
                                            width: img.width,
                                            height: img.height,
                                            // Set the center of the new object based on the event coordinates relative to the canvas container.
                                            left: e.layerX,
                                            top: e.layerY
                                        });
                                        canvas.add(newImage);
                                    };
                                    // Read in the image file as a data URL.
                                    reader.readAsDataURL(f);
                                }
                            }
                        }
                            // handle browser images
                        else {
                            var img = document.querySelector(''#images img.img_dragging'');
                            var newImage = new fabric.Image(img, {
                                width: img.width,
                                height: img.height,
                                // Set the center of the new object based on the event coordinates relative to the canvas container.
                                left: e.layerX,
                                top: e.layerY
                            });
                            canvas.add(newImage);
                        }

                        return false;
                    }

                    function handleDragEnd(e) {
                        // this/e.target is the source node.
                        [].forEach.call(images, function (img) {
                            img.classList.remove(''img_dragging'');
                        });
                    }

                    if (Modernizr.draganddrop) {
                        // Browser supports HTML5 DnD.

                        // Bind the event listeners for the image elements
                        var images = document.querySelectorAll(''#images img'');
                        [].forEach.call(images, function (img) {
                            img.addEventListener(''dragstart'', handleDragStart, false);
                            img.addEventListener(''dragend'', handleDragEnd, false);
                        });
                        // Bind the event listeners for the canvas
                        var canvasContainer = document.getElementById(''canvas-container'');
                        canvasContainer.addEventListener(''dragenter'', handleDragEnter, false);
                        canvasContainer.addEventListener(''dragover'', handleDragOver, false);
                        canvasContainer.addEventListener(''dragleave'', handleDragLeave, false);
                        canvasContainer.addEventListener(''drop'', handleDrop, false);
                    } else {
                        // Replace with a fallback to a library solution.
                        alert("This browser doesn''t support the HTML5 Drag and Drop API.");
                    }
                    //End Drag and Drop
//End of Code

Mi etiqueta de canvas HTML original es

<div id="canvas-container" class="canvas-container" >
 <canvas id="c" width="800" height="600" style="left: -300px; border: 1px dotted;"></canvas>                    
</div>  

Pero, cuando integé este código, las imágenes se están agregando al lienzo, pero cuando hago clic en el lienzo, desaparecen. Inspeccioné el elemento en Chrome y descubrí que hay 2 etiquetas de Canvas.

<div id="canvas-container" class="canvas-container">
  <div class="canvas-container" style="width: 800px; height: 600px; position: relative; -webkit-user-select: none;">
   <div class="canvas-container" style="width: 800px; height: 600px; position: relative; -webkit-user-select: none;">
    <canvas id="c" width="800" height="600" style="left: 0px; border: 1px dotted; position: absolute; width: 800px; height: 600px; top: 0px; -webkit-user-select: none;" class="lower-canvas"></canvas>
    <canvas class="upper-canvas" width="800" height="600" style="position: absolute; width: 800px; height: 600px; left: 0px; top: 0px; -webkit-user-select: none;"></canvas>
   </div>
   <canvas class="upper-canvas" width="800" height="600" style="position: absolute; width: 800px; height: 600px; left: 0px; top: 0px; -webkit-user-select: none;"></canvas>
 </div>                    
</div>

Cuando cambié la posición de todos los elementos en el código anterior a la position: relative; , funciona. Las 3 etiquetas de Canvas adicionales se generan automáticamente. ¿Cómo puedo cambiar la posición? Además, cuando genero la imagen png o jpg de canvas utilizando DataURL, firefox deja de responder.