$.ajax({
type: 'get',
url: myUrl,
success: function(data) {
//alert("ajax");
$.each(data, function(idx, obj) {
createImage(obj.id, obj.mPosX, obj.mPosY);
});
},
contentType: "application/json",
dataType: 'json'
});
function createImage(mId, curX, curY) {
var layer2 = new Kinetic.Layer();
var imageObj = new Image();
imageObj.src = 'img/pawn.png';
imageObj.onload = function() {
pImage[mId] = new Kinetic.Image({
x: curX,
y: curY,
image: imageObj,
draggable:true,
id: pImage[mId]
});
layer2.add(pImage[mId]);
layer2.setScale(cur_scale);
stage.add(layer2);
};
}
I am trying to add multiple images with different position from a JSON file, I am successful in placing the images in exact location, But the problem is if i try to drag the image it position itself at top of the canvas.
Any idea why it is behaving like this.?
right now you are creating a new layer for every single image. That is not how KJS works.
You first create a stage, then create a layer and then add all the images to this one layer.
Maybe this will solve the problem.
Related
I have done to create people distribution map including its photo as icon. And now, I want to try clustering them. But, I confused to implement them if reffering to Mapbox Docs (https://docs.mapbox.com/mapbox-gl-js/example/cluster/), because I looping the point to show each photo of the point. Do someone have an idea to this topic? This my code:
$(document).ready(() => {
$.ajax({
type: "GET",
//YOUR TURN: Replace with csv export link
url: `${google_sheet_name}/gviz/tq?tqx=out:csv&sheet=${sheet_name}`,
dataType: "text",
success: function (csvData) {
makeGeoJSON(csvData);
}
});
let makeGeoJSON = csvData => {
csv2geojson.csv2geojson(csvData, {
latfield: 'latitude',
lonfield: 'longitude',
delimiter: ','
}, (err, data) => {
var geo = {
'id': 'csvData',
'type': 'circle',
'source': {
'type': 'geojson',
'data': data
},
}
geo.source.data.features.forEach(marker => {
var el = document.createElement('img');
el.className = 'icon-image';
el.src = marker.properties.image_path
// make a marker for each feature and add it to the map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML('<h3>' + marker.properties.name + '</h3><p>' + marker.properties.description + '</p>'))
.addTo(map)
})
let UseBbox = () => {
let bbox = turf.bbox(data);
map.fitBounds(bbox, {
padding: 50
})
}
UseBbox()
});
};
});
Instead of rendering marker for each point, the example works with geojson data and layers. This gives better performance when you have more number of points.
The basic flow for your case would be something like
Add data to source to map as explained in example
Add 2 layers, one for rendering cluster icon, another for uncluster point
Clustered icon can be same as in example
Unclustered layer can use imagepath to render the user image
To dynamically load and render image use styleimagemissing event. Refer the example at https://docs.mapbox.com/mapbox-gl-js/example/add-image-missing-generated/
Note that adding images should be done synchronosly
I'm having some serious trouble with this piece of Croppie.JS Code.
It runs on the Croppie.JS demo. Calling the croppie plugin through a variable is working and reporting an object inside the parentheses.
However when I try to link it up to the rotation button, nothing rotates.
I can rotate it using the orientation setting in the bind function however this only seems to be accessible if I also refresh the whole page at the same time?
I'm hoping someone can help me out here, I'm in quite a mess.
I'm just looking to make it so that when you upload a picture, you can rotate it before you submit it without refreshing the page every time (because refreshing the page was also rotating the image?!)
//Code:
<button class="vanilla-rotate" data-deg="-90">Rotate</button>
var croppieBox = $('#main-cropper').croppie({
viewport: { width: 300, height: 300 },
boundary: { width: 320, height: 320 },
enableOrientation: true,
update: function (data) {
var coords = $('#main-cropper').croppie('get');
//alert ( JSON.stringify(coords, null, 4) );
//for data use
var pointA = coords.points[0];
var pointB = coords.points[1];
var pointC = coords.points[2];
var pointD = coords.points[3];
var zoom = coords.zoom;
var croppieGet = $('#main-cropper').croppie('result', {
type: "canvas",
format: <?php echo $file_ext;?>
}).then(function (img) {
document.getElementById("javascript_image_base64").value = img;
});
}
//Close the first part of Croppie
});
croppieBox.croppie('bind', {
url: <?php echo "'".$croppy_image_path."'"; ?>,
});
//.vanilla-rotate is the HTML button
$('.vanilla-rotate').on('click', function(ev) {
//vanilla is the new croppie instance, croppieBox
var croppieBox = $('#main-cropper');
//This line seems to be causing the problem???
$croppieBox.croppie('rotate', parseInt($(this).data('deg')));
});
// get cropped image data
// get zoom data
// get crop points data
//send it to php
</script>
Thanks to Gulshan and ADyson the code is now working. Thank you both, your help is much appreciated. You can see what you helped to build here at https://www.thejobswhale.com
If you are happy, I'll add you both to the credits list.
//Updated, working code is
<script>
//Check when window is resized. If it crosses the boundary for mobile,
//remove the zoomer from the croppie plugin.
//If it crosses it the other way, add the zoomer back in.
var croppieBox = $('#main-cropper').croppie({
viewport: { width: 300, height: 300 },
boundary: { width: 320, height: 320 },
enableOrientation: true,
update: function (data) {
var coords = $('#main-cropper').croppie('get');
//alert ( JSON.stringify(coords, null, 4) );
//for data use
var pointA = coords.points[0];
var pointB = coords.points[1];
var pointC = coords.points[2];
var pointD = coords.points[3];
var zoom = coords.zoom;
var croppieGet = $('#main-cropper').croppie('result', {
type: "canvas",
format: '<?php echo $file_ext;?>'
}).then(function (img) {
document.getElementById("javascript_image_base64").value = img;
});
}
//Close the first part of Croppie
});
croppieBox.croppie('bind', {
url: <?php echo "'".$croppy_image_path."'"; ?>,
});
//.vanilla-rotate is the HTML button
$('.vanilla-rotate').on('click', function(ev) {
//vanilla is the new croppie instance, croppieBox
var croppieBox = $('#main-cropper');
croppieBox.croppie('rotate', parseInt($(this).data('deg')));
});
// get cropped image data
// get zoom data
// get crop points data
//send it to php
</script>
So I created an image using canvas. And I want to pass the image using ajax. I know how to do it using form but this time I'm not using one. This is my code for creating image.
var video = document.querySelector('video')
, canvas;
var img = document.querySelector('img') || document.createElement('img');
var context;
var width = video.offsetWidth
, height = video.offsetHeight;
canvas = canvas || document.createElement('canvas');
canvas.width = width;
canvas.height = height;
context = canvas.getContext('2d');
context.drawImage(video, 0, 0, width, height);
img.src = canvas.toDataURL('image/png');
document.body.appendChild(img);
the "img" variable is my created image. This is my code of passing image using ajax
var form = $('#fileUploadForm')[0];
var data = new FormData(form);
$.ajax({
type: "POST",
enctype: 'multipart/form-data',
url: "/api/file/upload",
data: data,
processData: false, //prevent jQuery from automatically transforming the data into a query string
contentType: false,
cache: false,
success: (data) => {
$("#listFiles").text(data);
},
error: (e) => {
$("#listFiles").text(e.responseText);
}
});
I tried other tutorials by creating a new FormData but it doesn't seem to work. I also tried assigning value to input file type.But it doesn't work and others doesn't recommend it due to future security problems. Hoping you could help me.
I have a this SVG, which i am trying to load in canvas but it just render the black image, so how to solve it?
version: 2.0.0-beta.7
I have tried both method loadSVGFromString as well as loadSVGFromURL but no success:
//Using loadSVGFromString
var a = 'svg string';
fabric.loadSVGFromString(a,function(objects, options) {
var obj = fabric.util.groupSVGElements(objects, options);
canvas.add(obj).renderAll();
});
//using loadSVGFromURL
fabric.loadSVGFromURL('URL Here', function(objects,options) {
var group = new fabric.Group(objects, {
left: 50,
top: 50,
});
canvas.add(group);
canvas.renderAll();
});
checkout this codepen
"All black" svgs often is a result of some invalid or unsupported svg markup.
In your case I think you should remove the fill-opacity="null" references from your svg.
I have see that using google chart creates much RAM usage.
I must say that i have code somethink with javascript which lets the browser load every 7 seconds a new chart, it does give the Google Draw Chart function new data from a new file and the chart gets drawed, but this seems to create to much RAM usage on my PC. Does somebody know a trick how to avoid this? I think maybe the browser is saving all data from before in a cache or so, if that would not be done then maybe the RAM dont go so high after few minutes? Because now it does go higher and higher with few minutes it reach 100% and the browser stop working.
Here is my current code:
function drawVisualization()
{
//-- From this textfile the chart gets info which is the new symbol chart
var Textinhalt = $.ajax({ url: "Chartsettings.txt", contentType:"application/json", dataType:"json", async: false }).responseText;
var Setting = JSON.parse(Textinhalt);
Symbol=Setting.Selection[0].symbol;
Timeframe=Setting.Selection[0].timeframe;
Broker=Setting.Selection[0].broker;
//--Now the new data is been getting from php response file
var fileurl = "getData.php?symbol="+Symbol+"&timeframe="+Timeframe+"&broker="+Broker;
var jsonData = $.ajax({
url: fileurl,
contentType:"application/json",
dataType:"json",
async: false
}).responseText;
var array=$.parseJSON(jsonData);
//--Now new data have been saved into array and will be draw
var data =google.visualization.arrayToDataTable(array,true);
var options = {
legend: 'none'
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
//--If this function is clicked the google charts get refreshed every 7 seconds and i did see that my browser creates more and more RAM usuage till it goes over 100% and stops working
function PlayCharts()
{
drawVisualization();
setTimeout(PlaySignals, 7000);
}
part of the problem could be that you are creating a new chart every time
instead of drawing the same chart with new data
recommend changing the scope a little,
move the chart variables outside of drawVisualization
but you have to wait until google is loaded until creating
not sure what you're page on load function looks like
also, async: false on $.ajax is deprecated
recommend setup similar to following...
// move declarations outside of drawVisualization
var chart;
var options = {
legend: 'none'
};
// load google charts
google.charts.load('current', {
packages:['corechart']
}).then(function () {
// create chart
chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
// move other on page load functions here
// google.charts.load can be used instead of --> $(document).ready
});
function drawVisualization() {
//-- From this textfile the chart gets info which is the new symbol chart
var Textinhalt = $.ajax({ url: "Chartsettings.txt", contentType:"application/json", dataType:"json", async: false }).responseText;
var Setting = JSON.parse(Textinhalt);
Symbol=Setting.Selection[0].symbol;
Timeframe=Setting.Selection[0].timeframe;
Broker=Setting.Selection[0].broker;
//--Now the new data is been getting from php response file
var fileurl = "getData.php?symbol="+Symbol+"&timeframe="+Timeframe+"&broker="+Broker;
$.ajax({
url: fileurl,
contentType: 'application/json',
dataType: 'json'
}).done(function (jsonData) {
var array = $.parseJSON(jsonData);
//--Now new data have been saved into array and will be draw
var data = google.visualization.arrayToDataTable(array, true);
// draw same chart
chart.draw(data, options);
});
}
function PlayCharts() {
drawVisualization();
setTimeout(PlaySignals, 7000);
}