http://jsfiddle.net/rodrigopandini/gj7HT/
この例を使用して、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
ドラッグ アンド ドロップで複数の画像を追加するには、上記のコード (jsfiddle の例) を使用しました。Canvasに画像を1つずつ追加すると正常に機能するコードを次に示します。
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
私の元のHTMLキャンバスタグは
<div id="canvas-container" class="canvas-container" >
<canvas id="c" width="800" height="600" style="left: -300px; border: 1px dotted;"></canvas>
</div>
しかし、このコードを統合すると、画像がキャンバスに追加されますが、キャンバスをクリックすると消えます。Chrome で要素を調べたところ、2 つの 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>
上記のコードのすべての要素の位置を に変更するとposition: relative;、機能します。3 つの追加の Canvas タグが自動的に生成されます。位置を変更するにはどうすればよいですか？また、DataURL を使用してキャンバスの png または jpg 画像を生成すると、firefox が応答しなくなります。