Click here to Skip to main content
14,659,852 members
Home » Discussions » JavaScript
   

JavaScript

 
Questionhow to generate new products, confirm these products are not duplicates from the immediate previous set? Pin
hamzh sami21-Jul-20 10:28
Memberhamzh sami21-Jul-20 10:28 
QuestionHi , can someone help me with this task Pin
Member 1489271418-Jul-20 0:22
MemberMember 1489271418-Jul-20 0:22 
AnswerRe: Hi , can someone help me with this task Pin
Richard MacCutchan18-Jul-20 0:56
mveRichard MacCutchan18-Jul-20 0:56 
JokeRe: Hi , can someone help me with this task Pin
Peter_in_278018-Jul-20 1:34
professionalPeter_in_278018-Jul-20 1:34 
GeneralRe: Hi , can someone help me with this task Pin
Richard MacCutchan18-Jul-20 1:35
mveRichard MacCutchan18-Jul-20 1:35 
QuestionDOM Functions Pin
Member 1488961215-Jul-20 3:09
MemberMember 1488961215-Jul-20 3:09 
AnswerRe: DOM Functions Pin
Richard MacCutchan15-Jul-20 3:49
mveRichard MacCutchan15-Jul-20 3:49 
QuestionPoints Scaling issue on Leaflet Pin
LilFlower13-Jul-20 0:52
MemberLilFlower13-Jul-20 0:52 
I'm working on a project in which i'm capturing map screenshot (using dom-to-image library) and sending it to an external api which is returning back some co-ordinates(x,y,w,h) after processing the sent image. These co-ordinates(rectangles) i'm trying to draw on leaflet.

As the captured image size is bigger than width and height of captured area (don't know why), I need to do scaling the co-ordinates.

Now the problem is Leaflet rectangles are not drawing on accurate position which external API is returning.

However, I'm sure that the external API is returning correct co-ordinates (x,y,w,h) with correspond to send image's width & height.
Something wrong i'm doing on scaling coordinates.

Below is the code snippet i'm trying:

domtoimage.toPng(document.querySelector("#map"))
    .then(function (dataUrl) {
        var boundsOnly = map.getBounds();
        let topLeft = boundsOnly.getNorthWest();
        let topRight = boundsOnly.getNorthEast();
        let bottomLeft = boundsOnly.getSouthWest();
        let bottomRight = boundsOnly.getSouthEast();

        var currBBOXpoints = { x1y1: map.latLngToLayerPoint(topLeft), x2y2: map.latLngToLayerPoint(topRight), x3y3: map.latLngToLayerPoint(bottomRight), x4y4: map.latLngToLayerPoint(bottomLeft) };
        var pW = currBBOXpoints.x2y2.x - currBBOXpoints.x1y1.x;
        var pH = currBBOXpoints.x3y3.y - currBBOXpoints.x1y1.y;

        currBBOXpoints.pW = pW; //calculated the width of captured area
        currBBOXpoints.pH = pH; //calculated the height of captured area

        var i = new Image();
        i.onload = function () { //calculating captured image's actual width, height

            $.ajax({
                type: 'post',
                url: '/externalapi',
                data: JSON.stringify(dataUrl),
                contentType: "application/json",
                dataType: "json",
                success: function (resultData) {
                    resultData["iW"] = i.width; //captured image width
                    resultData["iH"] = i.height; //captured image height
                    resultData["currBBOXpoints"] = currBBOXpoints; //captured area bounds
                    drawRects(resultData);
                    //NOTE: Captured image's width and height are bigger than width and height of captured area (don't know why)
                }
            });
    };
    i.src = dataUrl;
});

function drawRects(rectData) {

    var scale = Math.max(rectData.currBBOXpoints.pW / rectData['iW'], rectData.currBBOXpoints.pH / rectData['iH']);

    var shifted_x = rectData.currBBOXpoints.pW / 2 - rectData['iW'] / 2 * scale;
    var shifted_y = rectData.currBBOXpoints.pH / 2 - rectData['iH'] / 2 * scale;

    rectData.od.forEach(rc => {
        var modifiedX = Number(rc['x']) * scale + shifted_x;
        var modifiedY = Number(rc['y']) * scale + shifted_y;
        var modifiedW = (modifiedX + rc['w'])
        var modifiedH = (modifiedY + rc['h'])


        let point3 = map.layerPointToLatLng(L.point(modifiedX, modifiedY));
        let point4 = map.layerPointToLatLng(L.point(modifiedW, modifiedH));

        var rectBounds = [[point3.lat, point3.lng], [point4.lat, point4.lng]];
        var boundingBox = L.rectangle(rectBounds, { color: "yellow", weight: 1, name: "rect", fillOpacity: 0.10 });

        map.addLayer(boundingBox);

    });
}

AnswerRe: Points Scaling issue on Leaflet Pin
jkirkerx15-Jul-20 12:33
professionaljkirkerx15-Jul-20 12:33 
QuestionJavascript summary with prompt Pin
atomattacker-png11-Jul-20 11:56
Memberatomattacker-png11-Jul-20 11:56 
AnswerRe: Javascript summary with prompt Pin
Richard MacCutchan11-Jul-20 23:00
mveRichard MacCutchan11-Jul-20 23:00 
GeneralRe: Javascript summary with prompt Pin
atomattacker-png11-Jul-20 23:38
Memberatomattacker-png11-Jul-20 23:38 
GeneralRe: Javascript summary with prompt Pin
Richard MacCutchan12-Jul-20 0:26
mveRichard MacCutchan12-Jul-20 0:26 
QuestionHow to access object literal property's value inside the object literal function? Pin
Member 139548909-Jul-20 9:40
MemberMember 139548909-Jul-20 9:40 
QuestionRe: How to access object literal property's value inside the object literal function? Pin
ZurdoDev9-Jul-20 10:13
mveZurdoDev9-Jul-20 10:13 
AnswerRe: How to access object literal property's value inside the object literal function? Pin
Andre Oosthuizen9-Jul-20 17:14
MemberAndre Oosthuizen9-Jul-20 17:14 
GeneralRe: How to access object literal property's value inside the object literal function? Pin
Member 1395489011-Jul-20 8:34
MemberMember 1395489011-Jul-20 8:34 
AnswerRe: How to access object literal property's value inside the object literal function? Pin
Richard MacCutchan9-Jul-20 23:25
mveRichard MacCutchan9-Jul-20 23:25 
AnswerRe: How to access object literal property's value inside the object literal function? Pin
F-ES Sitecore10-Jul-20 1:49
mveF-ES Sitecore10-Jul-20 1:49 
QuestionUnable to get the desired result when using arrow function in JavaScript Pin
Member 139548909-Jul-20 9:24
MemberMember 139548909-Jul-20 9:24 
AnswerRe: Unable to get the desired result when using arrow function in JavaScript Pin
ZurdoDev9-Jul-20 10:15
mveZurdoDev9-Jul-20 10:15 
QuestionJavascript to create Multilingual Footer Pin
Member 148850579-Jul-20 1:09
MemberMember 148850579-Jul-20 1:09 
AnswerRe: Javascript to create Multilingual Footer Pin
ZurdoDev9-Jul-20 10:16
mveZurdoDev9-Jul-20 10:16 
QuestionAny tips? I am brand new and created a binary translator. I'm open to feedback. Pin
Hany Halim1-Jul-20 9:55
MemberHany Halim1-Jul-20 9:55 
QuestionRe: Any tips? I am brand new and created a binary translator. I'm open to feedback. Pin
Richard MacCutchan1-Jul-20 22:41
mveRichard MacCutchan1-Jul-20 22:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.