Microsoft 365 Community SharePoint, 8 Apr 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building an advanced SPFx Image Editor web part

Description

During this 8-minute Developer-focused example, Peter Paul Kirschner steps through the workings of an SPFx web part - a browser-based HTML Image Editor that uses canvas and Office UI Fabric. The File Picker component is used to select an image and manipulate it – Resize, Crop, Flip, Rotate, Scale, Filter (Grayscale / Sepia), Redo / Undo, History of Actions. The web part was created initially to pick files from a custom external data source. See the sample in the Sample Gallery. This demo is taken from the SharePoint Framework community call recorded on April 8, 2021.

Demo Presenter: Peter Paul Kirschner (cubido) | @petkir_at

Supporting materials:
• Repo - React Image Editor | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-image-editor

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

Hello, everybody chris from austria. My name is peter paul kirschner and I want to show you the spfx sample react image editor. I want to jump directly to the demo and then takes the story behind the sample afterwards. So here it's my workbench and edit already the web part, and then I go to configure here. You see the pmp reusable control file picker. I pick the picture, monterey bay, aquarium and then open it on the top of the image. You see the different manipulation options you have.

A

You have here, for example, resize you can lock the aspect enter a number, I say 800 and you can also do it with a mouse. When I remove the s lock aspect, I also can change the width and the height. The next thing is you can crop. You can only take a part of the image you can move it. You have the same ability to crop a part of the picture. Then you can flip it. You can flip it vertical and you can flip it hard to tell then we can rotate it.

A

You have predefined values to rotate the image or reset it back or you can do it with freehand. The next thing is to assume uh to scale the image you can make it bigger and what is important, maybe you can do it again. You can make manipulations again and again so afterwards I crop it again and then I say I want to apply a filter. In this example, I want to try, say cpr filter. Whatever you do have we done already.

A

We can show it in the history and we can make an undo and we can also make a redo. You see it in history, it comes when I take the history and move the crop before the rotation.

A

Then the the result changed, because some manipulations are not so good to see that change the result, uh some not so, and you can reset it as soon as you say, I haven't done a manipulation with the image and they use a new picture. Then the already manipulations are removed. There's no api call in in the background. It's all done in the browser.

A

Let's switch back to the slide, so the motivation behind was silom is a partner company of mine and they produce a digital asset management and they want to bring the different types of assets from their product called content hub to sharepoint.

A

This digital asset management helps to organize assets and bring the assets to the right format to the different system. It takes care of the image rights and has an overview where the assets are used. One use case was to connect the selum content hub to sharepoint. So an end user can pick assets from the content up by the default. The microsoft file picker cannot be extended, so we used cannot be extended with a custom data source.

A

So the idea was born to make a custom web part, and one year ago, in the year, 2020 microsoft ads crop and scale functionality to the default image viewer. At this point, we have to improve the custom web part with image, manipulation functions, and so we start with the proof of concept, and this was the output of the proof of concept.

A

What you have seen in the demo, so the sample is written in spfx 1.4 and react 15, because it's also the focus that we support. Sharepoint 2019, um thanks to siloam, that I got the permission to share the complete source with you from the beginning.

A

uh It was written as reusable component, so the integration into a new spfx webpa should be in can be done in an easy way. So here we have the normal component and the only thing is to add in the random method the image manipulation you need. Some settings for the most important thing is the image url.

A

Then you have some settings. We have seen in the rotation, you have buttons and this buttons you can configure outside of this control. Then you have a settings array and as a corresponding thing, the settings event when something has changed, and this is what it looks like. We made a resize, a rotate, the flip scale and the crop, so the order is in the array. Already.

A

What's the concept behind this control, I started with a plain head, html page, to explain it as simple as possible below the image in this sample a load parker to help me to explain it, and here we load it and we as soon as the image is loaded. We call a function. This calls image received here.

A

We pick up the canvas element of the dom tree and request to get the context of the canvas. The next thing is we draw the image on this canvas and for to see the next effect better. I wrote some text on the image, so welcome parker, you have a great top-up model.

A

The next thing is, I want to flip it and each effect in the canvas starts at the left top corner. For this reason we have to move parker up, and then we use the negative scale to flip parker. So this should be the output, so let's go back to the source code. The structure is directly under the source, folder and the components you find the image manipulation.

A

All things you have seen is in this part, you find the grid here, uh also the filters and also the localization area. So when we take a look to the image manipulation, this is the main field. We have image change as a function and also here, because when the image change is initially loaded, we have to load the image, and here you see the same, what we have before in our parker sample.

A

The next thing is, we have to apply the settings array, we have it here and we have it also in the component. It update, because the array can also be updated outside of this control.

A

So and then we have to loop over uh each element of the settings array and then we make only a switch. What we have to do, the one thing is flip rotate scale for a precise or filter, and when we expand the flip you we see the same two lines we had before in our parker sample.

A

So thank you that I can share. Please provide feedback. uh I like issues like positive feedback and negative feedback thanks.

B

Awesome well that was very cool to see that the history thing, I think, blew everybody away, so very, very cool demo. Very cool capabilities- you've done there. So thank you so much for presenting that.