DecSoft Soporte - Cropping images using a Cordova plugin

Cropping images using a Cordova plugin

DecSoft HTML Compiler incluye un conveniente Compilador por línea de comandos para compilar sus apps desde la consola.

Los NeoPlugins de DecSoft tienen versiones "designtime" y "runtime" para reducir el tamaño de sus apps.

DecSoft HTML Compiler es fácil de usar: personalize su proyecto y compile sus apps y sus juegos rápidamente.

DecSoft App Builder integra un asistente de Open AI para ayudarle mientras desarrolla sus apps.

Ahorre tiempo, recursos y dinero creando apps para Android, iOS y más con la misma base de código.

Cree modernas apps y juegos HTML a otro nivel haciendo cosas que incluso las modernas apps y juegos HTML no pueden.

Cree apps y expanda sus capacidades usando el lenguaje más popular del mundo: Javascript.

Cree apps multiplataforma con DecSoft App Builder, incluyendo Android e iOS, con la misma base de código.

Compile, convierta sus modernas apps y juegos HTML en programas ejecutables sin dependencias para Microsoft Windows.

Ahorre dinero comprando nuestros paquetes de NeoPlugins. ¡Cinco, Diez e incluso nuestra colección entera a un precio increíble!

¡Eche un vistazo a nuestro canal de YouTube y suscríbase para recibir notificaciones sobre nuevos vídeos!

Los plugins oficiales de Apache Cordova se incluyen de serie y hay cientos de ellos disponibles para su uso.

¡Eche un vistazo a algunas de preguntas más frecuentes sobre nosotros y nuestros productos!

Diseñe para pantallas pequeñas y distribuya también (sin cambios) en dispositivos como tablets.

DecSoft App Builder incluye un conveniente Compilador por línea de comandos para compilar sus apps desde la consola.

DecSoft NeoPlugins pone sus proyectos de VisualNeo en otro nivel con +1.000 nuevas acciones para sus apps.

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!

Todo el mundo puede leer el foro de soporte de DecSoft para aprender del mismo, sin embargo, sólo los clientes de DecSoft pueden abrir nuevos hilos. Compre una o más licencias de productos de DecSoft y obtendrá este y otros beneficios.