I want to be able to upload images onto this canvas from the persons computer just for the time being while they use the canvas. I also want it to be moveable and resizeable like the other 2 images I have setup right now. Can someone help create a code that goes along with what I currently have. This is everything I have for it so far so if you could name such with the right class/ids that the parts of mine have. Thank you
<style>
canvas:active{
cursor:pointer;
}
.bg1{
background-image:url('http://s23.postimg.org/bxtmsd2tn/boutiquebase.jpg');
}
.bg2{
background-image:url('http://s4.postimg.org/bnevxi1y5/wall8.png');
}
.bg3{
background-image:url('http://s13.postimg.org/6cgbaoblh/wall9.png');
}
</style>
<div id="container" class="bg1"></div>
<img src="http://s23.postimg.org/bxtmsd2tn/boutiquebase.jpg" width="50px" id="wall1">
<img src="http://s4.postimg.org/bnevxi1y5/wall8.png" width="50px" id="wall2">
<img src="http://s13.postimg.org/6cgbaoblh/wall9.png" width="50px" id="wall3">
<table><tr>
<td>
<center> <img src="http://s29.postimg.org/yn6t21ah3/sidetable.png" id="shower" width="100px" style="cursor:pointer;">
<br>
<span id="hider1" class="sendingBut" style="cursor:pointer;">Remove </span>
</center></td>
</tr>
</table>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"></script>
<script>
$('#wall2').click(function() {
$('#container').removeClass('bg3').removeClass('bg1').addClass('bg2');
});
$('#wall1').click(function() {
$('#container').removeClass('bg3').removeClass('bg2').addClass('bg1');
});
$('#wall3').click(function() {
$('#container').removeClass('bg1').removeClass('bg2').addClass('bg3');
});
</script>
<script>
function update(activeAnchor) {
var group = activeAnchor.getParent();
var topLeft = group.find('.topLeft')[0];
var topRight = group.find('.topRight')[0];
var bottomRight = group.find('.bottomRight')[0];
var bottomLeft = group.find('.bottomLeft')[0];
var image = group.find('.image')[0];
var anchorX = activeAnchor.x();
var anchorY = activeAnchor.y();
// update anchor positions
switch (activeAnchor.name()) {
case 'topLeft':
topRight.y(anchorY);
bottomLeft.x(anchorX);
break;
case 'topRight':
topLeft.y(anchorY);
bottomRight.x(anchorX);
break;
case 'bottomRight':
bottomLeft.y(anchorY);
topRight.x(anchorX);
break;
case 'bottomLeft':
bottomRight.y(anchorY);
topLeft.x(anchorX);
break;
}
image.setPosition(topLeft.getPosition());
var width = topRight.x() - topLeft.x();
var height = bottomLeft.y() - topLeft.y();
if(width && height) {
image.setSize({width:width, height: height});
}
}
function addAnchor(group, x, y, name) {
var stage = group.getStage();
var layer = group.getLayer();
var anchor = new Kinetic.Circle({
x: x,
y: y,
stroke: '#666',
fill: '#ddd',
strokeWidth: 2,
radius: 8,
name: name,
draggable: true,
dragOnTop: false,
opacity: .01
});
anchor.on('mouseout', function () {
this.opacity(.01);
layer.draw()
});
anchor.on('mouseenter', function () {
this.opacity(1.00);
layer.draw()
});
anchor.on('dragmove', function() {
update(this);
layer.draw();
});
anchor.on('mousedown touchstart', function() {
group.setDraggable(false);
this.moveToTop();
});
anchor.on('dragend', function() {
group.setDraggable(true);
layer.draw();
});
// add hover styling
anchor.on('mouseover', function() {
var layer = this.getLayer();
document.body.style.cursor = 'pointer';
this.setStrokeWidth(4);
layer.draw();
});
anchor.on('mouseout', function() {
var layer = this.getLayer();
document.body.style.cursor = 'default';
this.strokeWidth(2);
layer.draw();
});
group.add(anchor);
}
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
function initStage(images) {
var stage = new Kinetic.Stage({
container: 'container',
width: 1000,
height: 764
});
var layer = new Kinetic.Layer();
var furniGroup = new Kinetic.Group({
x: 270,
y: 100,
draggable: true
});
var yodaGroup = new Kinetic.Group({
x: 100,
y: 110,
draggable: true
});
/*
* go ahead and add the groups
* to the layer and the layer to the
* stage so that the groups have knowledge
* of its layer and stage
*/
layer.add(furniGroup);
layer.add(yodaGroup);
stage.add(layer);
document.getElementById('shower').addEventListener('click', function() {
furniImg.show();
layer.draw();
}, false);
document.getElementById('hider1').addEventListener('click', function() {
furniImg.hide();
layer.draw();
}, false);
var furniImg = new Kinetic.Image({
x: 0,
y: 0,
width: 338,
height: 285,
image: images.furni,
name: 'image'
});
furniGroup.add(furniImg);
addAnchor(furniGroup, 0, 0, 'topLeft');
addAnchor(furniGroup, 338, 0, 'topRight');
addAnchor(furniGroup, 338, 285, 'bottomRight');
addAnchor(furniGroup, 0, 285, 'bottomLeft');
furniGroup.on('dragstart', function() {
this.moveToTop();
});
var yodaImg = new Kinetic.Image({
x: 0,
y: 0,
image: images.yoda,
width: 422,
height: 243,
name: 'image'
});
yodaGroup.add(yodaImg);
addAnchor(yodaGroup, 0, 0, 'topLeft');
addAnchor(yodaGroup, 422, 0, 'topRight');
addAnchor(yodaGroup, 422, 243, 'bottomRight');
addAnchor(yodaGroup, 0, 243, 'bottomLeft');
yodaGroup.on('dragstart', function() {
this.moveToTop();
});
stage.draw();
}
var sources = {
furni: 'http://s29.postimg.org/yn6t21ah3/sidetable.png',
yoda: 'http://s28.postimg.org/58nni8dzh/blackf10.png'
};
loadImages(sources, initStage);
</script>
This code lets you drag an image from the users desktop onto the Kinetic container div.
A new Kinetic.Image will be created from the dropped image.
Example code and a Demo: http://jsfiddle.net/m1erickson/w9onv0nm/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
// drag image to the div with id='container'
var container=document.getElementById("container");
container.addEventListener("dragover", function(e){ e.preventDefault(); }, false);
container.addEventListener("drop", function(e){
var files = e.dataTransfer.files;
if (files.length>0) {
var file=files[0];
if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) {
var reader=new FileReader();
reader.onload=function (e) {
var dragImage=new Image();
dragImage.onload=function(){
newDraggedImage(dragImage);
};
dragImage.src=e.target.result;
};
reader.readAsDataURL(file);
}
}
e.preventDefault();
}, false);
// create a new Kinetic.Image from the dropped image
function newDraggedImage(img){
layer.add(new Kinetic.Image({
image:img,
draggable:true,
}));
layer.draw();
}
}); // end $(function(){});
</script>
</head>
<body>
<h4>Drag an image onto the container to create a Kinetic.Image</h4>
<div id="container"></div><br>
</body>
</html>
[ Addition - creating group & anchors for dropped images ]
Warning! This is untested code...tweaking is probably required!
function createGroup(groupId,img,x,y){
var group = new Kinetic.Group({
id:groupId,
x:x,
y:y,
draggable: true
});
layer.add(group);
var image = new Kinetic.Image({
x: 0,
y: 0,
image:img,
width:img.width,
height:img.height,
name: 'image'
});
group.add(image);
addAnchor(group, 0, 0, 'topLeft');
addAnchor(group, img.width, 0, 'topRight');
addAnchor(group, img.width, img.height, 'bottomRight');
addAnchor(group, 0, img.height, 'bottomLeft');
group.on('dragstart', function() {
this.moveToTop();
});
return(group);
}