Skip to content
This repository was archived by the owner on Feb 26, 2019. It is now read-only.

cover-fit image tagging (follow up) #70

Open
githubanonym opened this issue Jul 9, 2018 · 0 comments
Open

cover-fit image tagging (follow up) #70

githubanonym opened this issue Jul 9, 2018 · 0 comments

Comments

@githubanonym
Copy link

githubanonym commented Jul 9, 2018

this is a follow up issue of this one #64

if someone takes over the repo, it would be great to add the support for "cover-fit" image tagging.

here is some code to show one way to do it (but this is only a workaround)

function buildTags()
{

    // be aware that image.clientWidth and image.clientHeight are available when image is loaded
    var croppedWidth = false;
    var expectedWidth = 0;
    var croppedWidthHalf = 0;
    var imageWidth = 0;
    var croppedHeight = false;
    var expectedHeight = 0;
    var croppedHeightHalf = 0;
    var imageHeight = 0;
    var naturalRatio = image.naturalWidth/image.naturalHeight;
    var coverRatio = image.clientWidth/image.clientHeight;
    if(Math.abs(naturalRatio - coverRatio) < 0.01)
    {
        // the image is not cropped, nothing to do
    }
    else
    {
        if(naturalRatio > coverRatio)
        {
            // width is cropped
            croppedWidth = true;
            expectedWidth = image.clientHeight * naturalRatio;
            croppedWidthHalf = (expectedWidth - image.clientWidth)/2;
            imageWidth = image.clientWidth;
        }
        else
        {
            // height is cropped
            croppedHeight = true;
            expectedHeight = image.clientWidth / naturalRatio;
            croppedHeightHalf = (expectedHeight - image.clientHeight)/2;
            imageHeight = image.clientHeight;

        }
    }
    function calcy(y)
    {
        if(croppedHeight)
        {
            var positiony = y * expectedHeight;
            if(positiony >  croppedHeightHalf)
                return (positiony - croppedHeightHalf)/imageHeight;
            else // tag is outside the picture because cropped
                return 0; // TODO : handle that case nicely
        }
        else
            return y;
    }

    function calcx(x)
    {
        if(croppedWidth)
        {
            var positionx = x * expectedWidth;
            if(positionx > croppedWidthHalf)
                return (positionx - croppedWidthHalf)/imageWidth;
            else // tag is outside the picture because cropped
                return 0; // TODO : handle that case nicely
        }
        else
            return x;
    }

    var tags = [

      Taggd.Tag.createFromObject({
        position: { x: calcx(0.74), y: calcy(0.56) },
        text: 'some tag',
      }),
      Taggd.Tag.createFromObject({
        position: { x: calcx(0.9), y: calcy(0.29) },
        text: 'some other tag',
      }),

      ....
    ];
    var taggd = new Taggd(image, options, tags);

}
$(window).bind("load", function() {buildTags();});

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant