DecSoft Support - Cropping images using a Cordova plugin

Cropping images using a Cordova plugin

DecSoft App Builder include a convenient Command Line Compiler, so you can compile your apps from the console.

Save money by purchasing our NeoPlugins bundles. Five, Ten and even the complete NeoPlugins collection at an incredible price!

Create modern HTML apps and games at another level making things impossible to do even by modern HTML apps and games.

DecSoft HTML Compiler is easy to use: set your project's options and compile your apps and games in a nutshell.

Create multiplatform apps with DecSoft App Builder, including Android and iOS with the same base of code.

Create apps and expand their capabilities by using the world's popular programming language: Javascript.

DecSoft App Builder integrates an Open AI assistant in order to assist you while developing your apps.

DecSoft HTML Compiler include a convenient Command Line Compiler, so you can compile your apps from the console.

DecSoft NeoPlugins put your VisualNeo projects into another level with +1,000 new actions for your apps.

Apache Cordova's official plugins are supported out of the box and there are hundreds of plugins ready to use.

Compile, convert your modern HTML apps and games into Microsoft Windows executable programs without dependencies.

Take a look at some frequently asked questions about us and our products!

Take a look at our YouTube channel and subscribe to be notified about new videos!

Save time, resources and money creating apps for Android, iOS and more with the same base of code.

Design for small screen devices but deploy also (without changes) in larger devices like tablets.

DecSoft NeoPlugins are available in both runtime and designtime flavours to keep your apps as small as possible.

Asley Cruz

Hi David,
I would like to use a plugin to crop an image selected from gallery and to show
the cropped image in an Image control in AB1.

You can use the below plugin or another cordova plugin:
cordova-plugin-crop-with-ratio
I found this plugin but I wasn't able to make it works :/

Hoping it is possible. Thanks a lot in advance. Have a nice week.

AsleyCruz.com

Graphic & Web Designer

My app: AC Biblia

My game: AC Trivlia

DecSoft

Hello Asley,

I did not try the plugin that you refer, however, what is the problem? What do you try? Do you get any error message? Are you try to follow the plugin's documentation? Are you try with a device connected to the PC, so you may can see some debug information? I will try to help you if you provide a bit more of information!

Purchase one or more licenses of our products if they are useful to you!

Asley Cruz

Hi David,
Sorry for the delay... I tried to start the plugin but it seems it does not work. I don't know what I am doing wrong :/
My app "Quotes" works with images but I would like to use this plugin (or any other) to crop images in AB1.
If you can make it work, maybe you want to add it in Samples folder.

Thanks, thanks & this is how the plugin should look:

AsleyCruz.com

Graphic & Web Designer

My app: AC Biblia

My game: AC Trivlia

DecSoft

Hello Asley,

The problem if you did not provide any information, is not only that you force me to start to deal with the plugin from the scratch, but, also, that I don't know the possible context, so, maybe my effort is non useful. This is common in support forums, Asley: we must try to provide as much information as possible about the possible error, so other people can try to help us in the best way.

Trying the plugin, I can get it working at the first time, without any remarkable problem. Below you can see a modification of the Camera sample app, which uses the plugin to crop the captured photo / image: copy the below code in a file like "Camera.ab" and then open it with AB1, compile it and finally try it in an Android device:

<?xml version="1.0" encoding="utf-8"?>
<AppBuilder Version="2019.58">
  <App>
    <ID>com.appbuilder.camera</ID>
    <Name>Camera</Name>
    <ShortName>Camera</ShortName>
    <Version>1.0.0</Version>
    <Width>320</Width>
    <Height>480</Height>
    <Description>Another App Builder app</Description>
    <AuthorName>App Builder</AuthorName>
    <AuthorUrl>https://www.decsoftutils.com/</AuthorUrl>
    <AuthorEmail>info@decsoftutils.com</AuthorEmail>
    <Created>2015-08-02T12:00:00.000</Created>
    <Metadata />
    <Webapp />
    <ProWebApp>
      <BgColor>#ff0f00</BgColor>
      <ThemeColor>#ff0f00</ThemeColor>
    </ProWebApp>
    <WebExtension />
    <Cordova>
      <General>
        <CreateConfig>1</CreateConfig>
        <OverScroll>0</OverScroll>
        <StatusBarBgColor>#000000</StatusBarBgColor>
      </General>
      <Plugins>
        <CameraPlugin>1</CameraPlugin>
        <Custom>
          <![CDATA[@prototypeberlin/cordova-plugin-crop]]>
        </Custom>
      </Plugins>
      <Electron />
      <Android />
      <IOS>
        <DebugSignPackageType>development</DebugSignPackageType>
        <ReleaseSignBuildFlags>development</ReleaseSignBuildFlags>
      </IOS>
      <Windows />
      <Phonegap />
      <Platforms>
        <Android>1</Android>
      </Platforms>
      <Splash>
        <SplashSpinnerColor>#ffffff</SplashSpinnerColor>
      </Splash>
      <Config />
      <Paths />
    </Cordova>
  </App>
  <Views>
    <View>
      <Name>Master</Name>
      <IsMaster>1</IsMaster>
      <Controls />
    </View>
    <View>
      <Name>NewView1</Name>
      <Animation>fadeIn</Animation>
      <Controls>
        <Control Role="40001">
          <Name>AppComment</Name>
          <Top>32</Top>
          <Left>344</Left>
          <Width>296</Width>
          <Height>184</Height>
          <Text>
            <![CDATA[This sample application show us how to use the Camera control in order to take a picture from the device. Remember that the Camera control requires a Cordova build application plus the Camera plugin.

This particular Camera sample take a picture from the device's camera and put it into an Image control. Take a look at others Camera app samples to view more uses cases.]]>
          </Text>
        </Control>
        <Control Role="2001">
          <Name>Button1</Name>
          <Top>416</Top>
          <Left>16</Left>
          <Width>288</Width>
          <Height>50</Height>
          <Text>
            <![CDATA[Take a picture]]>
          </Text>
          <Kind>primary</Kind>
          <TabIndex>0</TabIndex>
          <Icon>fa fa-file-photo-o fa-lg</Icon>
          <ClickEvent>
            <![CDATA[
// Just do it!
SetVar "[Camera1.Quality]" "[Range1.Value]" "String"
CameraGetPicture "Camera1"
]]>
          </ClickEvent>
        </Control>
        <Control Role="8001">
          <Name>Image1</Name>
          <Top>8</Top>
          <Left>16</Left>
          <Width>288</Width>
          <Height>352</Height>
        </Control>
        <Control Role="30011">
          <Name>Camera1</Name>
          <Top>240</Top>
          <Left>360</Left>
          <Width>150</Width>
          <Height>50</Height>
          <TargetWidth>288</TargetWidth>
          <TargetHeight>384</TargetHeight>
          <Source>camera</Source>
          <Direction>back</Direction>
          <Destination>file_uri</Destination>
          <ErrorEvent>
            <![CDATA[
If "[Camera1.Error]" "==" "-1"
  AlertBox "This app need to be build using Apache Cordova!" "warning"
Else
  AlertBox "An error occur: [Camera1.Error]" "warning"
EndIf]]>
          </ErrorEvent>
          <SuccessEvent>
            <![CDATA[
StartJS

  var options = {
    quality: 75
  };

  plugins.crop.promise(window.App.RootScope.Camera1.Data, options)
   .then(function (newPath) {
     document.getElementById('Image1').src = newPath;
   })
   .catch(function (error) {
     alert(error);
   });

EndJS]]>
          </SuccessEvent>
        </Control>
        <Control Role="3007">
          <Name>Range1</Name>
          <Top>368</Top>
          <Left>16</Left>
          <Width>288</Width>
          <Height>40</Height>
          <Min>0</Min>
          <TabIndex>0</TabIndex>
        </Control>
      </Controls>
    </View>
  </Views>
  <Functions />
  <Files>
    <Styles />
    <Scripts />
    <Folders />
    <Images />
    <Others />
  </Files>
  <Generator>
    <Name>App Builder</Name>
    <Version>2019.58 (6/17/2020)</Version>
    <Email>mailto:info@decsoftutils.com</Email>
    <Website>https://www.decsoftutils.com/</Website>
    <Copyright>©2020 App Builder by DecSoft</Copyright>
  </Generator>
</AppBuilder>

I hope the above can be useful for you, at least to give you some idea. On the other hand, there are various "crop images" JavaScript libraries that maybe you can consider to use, so you get something working not only in the supported plugin platforms, but in almost all the platforms. Please, post here if you have any further question about this. And don't hesitate to do it, since I will try to help you if possible.

Purchase one or more licenses of our products if they are useful to you!

Asley Cruz

Many thanks, David
I am not used to install extra plugins in AB but your sample works like a charm.
I also tried this JS library called "Cropper" and works great too, 100%.

CropperJS

Have a nice month.

AsleyCruz.com

Graphic & Web Designer

My app: AC Biblia

My game: AC Trivlia

DecSoft

Hello Asley,

So finally you got it? I did not try the JavaScript library that you refers, but certainly it's one of the first results searching in Google here too. :-)

Purchase one or more licenses of our products if they are useful to you!

Asley Cruz

Yes David, I got it :)
Thanks a lot ehhh. Take care a lot.

AsleyCruz.com

Graphic & Web Designer

My app: AC Biblia

My game: AC Trivlia

Everybody can read the DecSoft support forum for learning purposes, however only DecSoft customers can post new threads. Purchase one or more licenses of some DecSoft products in order to give this and other benefits.