I have used one script. My problem is script is not working in Firefox browser.
Code is here:
window.onload = function(){
var stage = new Kinetic.Stage({
container : "cantainer",
width : 400,
height : 400
});
var layer = new Kinetic.Layer();
stage.add(layer);
var con = stage.getContainer();
var dragSrcEl = null;
//image
document.getElementById("yoda").addEventListener('dragstart',function(e){
dragSrcEl = this;
});
con.addEventListener('dragover',function(e){
e.preventDefault(); //#important
});
//insert image to stage
con.addEventListener('drop',function(e){
var image = new Kinetic.Image({
draggable : true
});
layer.add(image);
imageObj = new Image();
imageObj.src = dragSrcEl.src;
imageObj.onload = function(){
image.setImage(imageObj)
layer.draw()
};
});
Check the script on link: http://jsfiddle.net/lavrton/n4w44/
Thanks for help in advance.
Add
e.preventDefault();
inside drop event listener.
Demo: http://jsfiddle.net/bk86e/
Related
First here's my client side code:
$("#fileToUpload").on("change", function(){
var filesToUpload = document.getElementById("fileToUpload");
var file = filesToUpload.files[0];
var img = new Image(600,400);
var reader = new FileReader();
reader.onload = function(e){
img.src = e.target.result;
}
reader.readAsDataURL(file);
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
img.onload = function(){
canvas.width = 600;
canvas.height = 400;
ctx.drawImage(img,0,0,canvas.width,canvas.height);
}
var dataURL = canvas.toDataURL("image/jpg");
var data = new FormData();
data.append("image", dataURL);
var xhttp = new XMLHttpRequest;
xhttp.open("POST", "test.php", true);
xhttp.send(data);
})
And here's my php code:
$imageArr = explode(',', $_POST['image']);
$image = base64_decode($imageArr[1]);
file_put_contents('image.jpg',$image);
I'm resizing the image on the client side and then sending it as a data url to php to then be saved as an image.
When I save an image it creates a blank image on my server. BUT when I save another image without refreshing the page it saves the previous image in it's place and this time correctly. This is beyond me, can someone please shed some light?
You are sending the image before it is loaded. Your img.onload function is executed after xhttp.send(data). When you upload one more time it gets previous image which is already loaded.
Try following:
$("#fileToUpload").on("change", function(){
var filesToUpload = document.getElementById("fileToUpload");
var file = filesToUpload.files[0];
var img = new Image(600,400);
var reader = new FileReader();
reader.onload = function(e){
img.src = e.target.result;
}
reader.readAsDataURL(file);
var canvas = document.getElementById("canvas");
canvas.width = 600;
canvas.height = 400;
var ctx = canvas.getContext('2d');
img.onload = function(){
ctx.drawImage(img,0,0,canvas.width,canvas.height);
var dataURL = canvas.toDataURL("image/jpg");
var data = new FormData();
data.append("image", dataURL);
var xhttp = new XMLHttpRequest;
xhttp.open("POST", "test.php", true);
xhttp.send(data);
}
})
A possibility to keep in mind: Since everything on client side is setup in the file input's onChange event handler, maybe some setup code is launched in the wrong order and/or not in time to be used as intended? Then, when invoking the onChange event again, resources are already in place /has already been initialized and the image gets displayed as intended.
It's just a theory. To investigate, try to move initializations out of the event handler scope.
I am trying create map with amCharts using jquery ajax but it doesnt work with ajax.
here my ajax code:
$('button#btn').click(function(){
$('div#ozellikli').html('<center><img src="assets/img/loading.gif" width="200" height="200"/></center>')
$.ajax({
type:'post',
url:'ozellikliAjax.php',
data:$('form#oz').serialize(),
success:function(msg){
$('div#ozellikli').html(msg);
}
});
});
Here my ajax php code:
<?php
include 'config.php';
$html="";
$yil=$_POST['yil'];
$tur=$_POST['tur'];
///HARITAYI CIZ
$sql="SELECT id,il,COUNT(kurum) AS kurum_Say FROM ozellikli GROUP BY id,il ORDER BY kurum_Say";
$result=$baglanti->query($sql);
$mapChart="";
while ($query=$result->fetch(PDO::FETCH_ASSOC)) {
$mapChart.=' { title: "'.$query['il'].':'.$query['kurum_Say'].'", id: "TR'.$query['id'].'",value:'.$query['kurum_Say'].', selectable: true },';
}
$html.='<script type="text/javascript">
AmCharts.ready(function() {
var map;
// *** CREATE MAP ***********************************************************
function createMap(){
map = new AmCharts.AmMap();
map.pathToImages = "http://www.ammap.com/lib/images/";
//map.panEventsEnabled = true; // this line enables pinch-zooming and dragging on touch devices
var dataProvider = {
mapVar: AmCharts.maps.turkeyLow
};
map.areasSettings = {
unlistedAreasColor: "#43B1A9",
rollOverOutlineColor: "#FFFFFF"
};
map.colorSteps=5;
map.valueLegend={
left: 10,
bottom:0,
minValue: "En Az",
maxValue: "En Çok"
};
dataProvider.areas = ['.$mapChart.'];
map.dataProvider = dataProvider;
map.addListener(\'clickMapObject\', function (event) {
// deselect the area by assigning all of the dataProvider as selected object
map.selectedObject = map.dataProvider;
// toggle showAsSelected
event.mapObject.showAsSelected = !event.mapObject.showAsSelected;
// bring it to an appropriate color
map.returnInitialColor(event.mapObject);
var states = [];
for (var i in map.dataProvider.areas) {
var area = map.dataProvider.areas[i];
if (area.showAsSelected) {
states.push(area.title);
}
}
});
map.write("mapdiv");
}
createMap();
});
</script>';
echo $html;
?>
when run the ajax code , script loading with ajax correctly but its not charting to map.
How can I solve this issue?
thanks
If you inject the resources the same way, you need to set manually it's ready state otherwise it won't work. AmCharts listens to the dom loaded event to set following property:
AmCharts.isReady = true;
i have a problem that is bothering me form 2 days.
I'm developing a little music sharing site and i have a problem making the design for the player.
I want to apply a blurred image background to a div with CSS and with the blur begin applied on the image via JS all with pixastic js library. The problem is that pixastic gives me a HTMLImageElement witch i can't apply to a css with $('.footer').css('background', "url(" + img.toDataURL("image/png")+ ")" }); since toDataURL works only with canvas elements.
How can i do that?
My code so far is:
var img = new Image();
img.src = '<?php echo $hd ?>';
img.onload = function() {
Pixastic.process(img, "blurfast", {amount:1});
}
$('.footer').css('background', "url(" + img.toDataURL("image/png")+ ")" });
The $hd is a http url that points to an album artwork using lastfm API
I'm not sure about first argument of css method and why you dont use img.src as url of image? Try something like this:
$('.footer').css('background-image', 'url(' + img.src + ')');
Ok I found probably answer on documentation:
var options = {};
Pixastic.process(image, "action", options);
options.resultCanvas; // <- holds new canvas
So in your case it would be:
var img = new Image(),
options = {};
options.amount = 1
img.src = '<?php echo $hd ?>';
img.onload = function() {
Pixastic.process(img, "blurfast", options);
$('.footer').css('background', "url(" + options.resultCanvas.toDataURL("image/png")+ ")" });
}
I am trying to send a canvas drawing to the server using javscript.
Having a function such as :
function uploadPic() {
var imgData = document.getElementById("myCanvas").toDataURL();
window.location = "myPHPfile.php?imageData=" + imgData;
}
What would the best way to pass the imgData variable to the php page due to its large size.
Thanks in advance!
User post request to pass large data. You can use jQuery post method
$.post('myPHPfile.php', { imageData: imgData }, function(data) {
// completed
});
Or create and post form:
function uploadPic() {
var imgData = document.getElementById("myCanvas").toDataURL();
var form = document.createElement('form');
form.method = "POST";
form.action = "myPHPfile.php";
var hidden = document.createElement('input');
hidden.type = 'hidden';
hidden.name = 'imageData';
hidden.value = imgData;
form.appendChild(hidden);
document.body.appendChild(form);
form.submit();
}
I have made a javascript code that load dinamically images in a directory (php) and then display them using a jquery galery plugin.
I was unable to run the galleryView after all the pictures were loaded by the client. The single way was to use a delay command.
I don´t have to tell the disadvantages of this method. Does anyone knows how to "correct" the script so that the gallery plugin is called after all the images are loaded?
<script type="text/javascript">
$("document").ready(function() {
$('#aa').load('get_fotos.php').delay(2000).queue(function() {
$('#aa').galleryView({
panel_width: 800,
panel_height: 400,
show_filmstrip_nav: false,
enable_slideshow: false,
panel_animation: 'crossfade',
frame_opacity: 1,
show_infobar: false,
frame_width: 80,
frame_height: 40,
// frame_scale: 'fit',
});
});
});
</script>
Thanks a lot
You can check this out by this:
It worked for me hope it helps.
imageArray = new Array();
imageArray[0] = 'image1.jpg'; // your image path
imageArray[1] = 'image2.jpg'; // your image path
htmldata='';
count = 0;
imgArray = new Array();
$.each(imageArray, function(i,item){
var image=new Image();
$(image).bind("load", {}, function(event) {
count++;
imageArray[i] = $(image).attr("src");
if(count==2){
$("#imageHolder").empty();
$.each(imageArray, function(j,item){
htmldata = '<img id="image'+j+'" src="' + imageArray[j] +'" />'; //create ur image tag u need to call
$("#imageHolder").append(htmldata);
});
$('#aa').galleryView({//call your bind method for plug in
});
}
});
image.src = imageArray[i];