HTML5 Pub: user able to insert their own images?

Stephen · **Posted:** February 2nd, 2018, 12:47 am

HTML5 project
Trying to create an HTML5 pub in which the user can click a button to display a file explorer dialog box for image files (JPEG, PNG, etc.) on their computer or device, that once they choose an image, will display in an image box in the uploaded pub.

Found this code, but so far while it displays the image, the image takes up the entire screen even though I am putting the code in a JavaScript action in an image box (500 X 500).

Code:

function main()
{
    var inputFileToLoad = document.createElement("input");
    inputFileToLoad.type = "file";
    inputFileToLoad.id = "inputFileToLoad";
    document.body.appendChild(inputFileToLoad);

    var buttonLoadFile = document.createElement("button");
    buttonLoadFile.onclick = loadImageFileAsURL;
    buttonLoadFile.textContent = "Load Selected File";
    document.body.appendChild(buttonLoadFile);
}

function loadImageFileAsURL()
{
    var filesSelected = document.getElementById("inputFileToLoad").files;
    if (filesSelected.length > 0)
    {
        var fileToLoad = filesSelected[0];

        if (fileToLoad.type.match("image.*"))
        {
            var fileReader = new FileReader();
            fileReader.onload = function(fileLoadedEvent) 
            {
                var imageLoaded = document.createElement("img");
                imageLoaded.src = fileLoadedEvent.target.result;
                document.body.appendChild(imageLoaded);
            };
            fileReader.readAsDataURL(fileToLoad);
        }
    }
}

main();

From: https://thiscouldbebetter.wordpress.com ... avascript/

Must be a more efficient way to do this, get the image inside a smaller image box?

mackavi · **Posted:** February 3rd, 2018, 9:02 am

Yes, the line:

Code:

document.body.appendChild(imageLoaded);

Tells your script to a attach the new image element to the body element of the document. If you think of this element (body) as Opus, then your pages are children which means you are adding the new image at the same level as an Opus page.

What you need to do is add the image as a child of a page instead.

Although possible, I do wonder at this point whether it would be simpler to use Opus' own capabilities to simply add an image place holder and change the source?

</mack>

Stephen · **Posted:** February 3rd, 2018, 2:29 pm

Would the end-user be able to summon a search dialog, save the choice in a variable and then use this variable in the image place holder in an HTML5 pub?

I'll try to test.

Much thanks for this suggestion.

mackavi · **Posted:** February 5th, 2018, 9:51 am

Hi Stephen,

It's something I have done for very specific instances - so whether combining parts of these for your exact needs would work - is open to testing. I don't think a prototype would be difficult based on the example you already provided and if I get a chance I'll have play.

</mack>

Stephen · **Posted:** February 6th, 2018, 2:52 am

Hi Mack,

Found a better online version for File Reader to experiment with: https://thiscouldbebetter.wordpress.com ... avascript/

However, I am having difficulty getting another part of the HTML5 project to work:

After the user chooses and inserts an image or photo, I need them to place (drag and drop) 2 dots on the image (Vectora and vVectorb). Then the script would get the positions of the 2 vectors, use the difference in their X positions to calculate distance between (only distance between on their X axis), then size and place a line (linea) between to connect them (again only on their X axis).

When I script the correct calculations, then plug them in to GetObjectSize and SetPosition (OpusScript), doesn't work. If I hard code SetPosition (500, 500) tht would work, but if I use the variables for the vectors' postion and distance between, won't work.

Code:

var pos = Vectora.GetPosition();
var PosXVectora = pos.x;
var PosYVectora = pos.y;
var pos2 = Vectorb.GetPosition();
var PosXVectorb = pos2.x;
var PosYVectorb = pos2.y;
var lineasize = (PosXVectorb-PosXVectora);
linea.SetObjectSize( lineasize, 1 );
var PosXlinea = (PosXVectora + PosXVectorb)/2;
linea.SetPosition(PosXlinea, PosYVectora);

I've tried this with and without the "var" (if without var, have added each variable to the variable tab). No joy either way.

Must be doing something wrong. :oops:

mackavi · **Posted:** February 6th, 2018, 12:03 pm

The function SetObjectSize is not available in HTML5 publications.

I believe SetScale works.

</mack>

Stephen · **Posted:** February 6th, 2018, 1:55 pm

Thanks, Mack. Am experimenting with SetScale as a substitute in the project. Looks promising.

An additional question: is GetDisplayData() supported in HTML5? (I have another part of the project that would, if possible, use GetDisplayData()
or a scripting equivalent to get the display angle for an image.)

mackavi · **Posted:** February 7th, 2018, 11:28 am

There's a command called getRotate() that returns the total amount of rotation applied to an image.

</mack>

Stephen · **Posted:** February 7th, 2018, 1:48 pm

Tried this but no result:

(Rotated Image5, then ran this script in a button and a textbox with variable ImageAngle inserted)

Code:

ImageAngle = Image5.getRotate();

Did not return anything.

Must be doing this wrong?

mackavi · **Posted:** February 7th, 2018, 3:49 pm

Tried it your way and it worked fine here.

Turn on debugging tools and see if you're throwing an error.

</mack>

Stephen · **Posted:** February 7th, 2018, 5:21 pm

OK, found the error. My fault: was using Image 5, not Image5, so script needed Image_5. :oops:

Fixed and working. Much thanks.

Useful FileReader info: https://developer.mozilla.org/en-US/doc ... plications

Digital Workshop

HTML5 Pub: user able to insert their own images?

Who is online