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.