bthurlow / nativescript-imagecropper Goto Github PK
View Code? Open in Web Editor NEWA nativescript image cropping plugin.
License: Other
A nativescript image cropping plugin.
License: Other
I'm trying to make it work but I'm getting this (following the demo)
JS: === dump(): dumping members ===
JS: {
JS: "response": "Error",
JS: "image": null
JS: }
using:
┌──────────────────┬─────────────────┬────────────────┬──────────────────┐
│ Component │ Current version │ Latest version │ Information │
│ nativescript │ 2.5.4 │ 3.0.3 │ Update available │
│ tns-core-modules │ 2.5.2 │ 3.0.1 │ Update available │
│ tns-android │ 3.0.1 │ 3.0.1 │ Up to date │
│ tns-ios │ 3.0.1 │ 3.0.1 │ Up to date │
└──────────────────┴─────────────────┴────────────────┴──────────────────┘
Hello, I'm having a problem while doing the build release of my application. The problem is in choosing the multidex version. It is looking for the SDK version. So when it goes through the multidex it looks for version 26 (For example), and the version that exists is 1.0.0.
"dependencies": { "@angular/animations": "~5.2.0", "@angular/common": "~5.2.0", "@angular/compiler": "~5.2.0", "@angular/core": "~5.2.0", "@angular/forms": "~5.2.0", "@angular/http": "~5.2.0", "@angular/platform-browser": "~5.2.0", "@angular/platform-browser-dynamic": "~5.2.0", "@angular/router": "~5.2.0", "nativescript-angular": "~5.3.0", "nativescript-imagecropper": "^1.0.1", "nativescript-theme-core": "~1.0.4", "reflect-metadata": "~0.1.10", "rxjs": "~5.5.5", "tns-core-modules": "~4.0.0", "zone.js": "~0.8.18" }, "devDependencies": { "@angular/compiler-cli": "~5.2.0", "@ngtools/webpack": "~1.9.4", "babel-traverse": "6.26.0", "babel-types": "6.26.0", "babylon": "6.18.0", "clean-webpack-plugin": "~0.1.19", "copy-webpack-plugin": "~4.3.0", "css-loader": "~0.28.7", "extract-text-webpack-plugin": "~3.0.2", "lazy": "1.0.11", "nativescript-dev-typescript": "~0.7.0", "nativescript-dev-webpack": "^0.11.0", "nativescript-worker-loader": "~0.8.1", "raw-loader": "~0.5.1", "resolve-url-loader": "~2.2.1", "typescript": "~2.7.2", "uglifyjs-webpack-plugin": "~1.1.6", "webpack": "~3.10.0", "webpack-bundle-analyzer": "^2.9.1", "webpack-sources": "~1.1.0" }
Only execute the any project with this plugin with this command:
tns build android --bundle --env.aot --release --copy-to xxxx.apk --release --keyStorePath /path.keystore --keyStorePassword xxx --keyStoreAlias xxx --keyStoreAliasPassword xxx --env.snapshot
Hi @bthurlow
Thanks for your plugin. It's awesome.
I'd like to ask you if there is any way to make the mask of the cropper to be rounded. I want the image to be saved as a square but the mask to be rounded.
Do you think this could be possible on both platforms?
Thanks in advance.
Hi, the plugin is working perfectly, i want to ask you if you can add the possibility to customize the color of the view on android, give that UCrop now supports the customization.
Thank you
Hi,
nativescript-imagecropper Plugin is not working in Nativescript 3.0.3 Version.
It gives me undefined error in catch clause.
Is there another way to implement nativescript-imagecropper Plugin for Nativescript 3.0.3 Version?
tns --version
to fetch it)4.1.2
node_modules/tns-core-modules/package.json
file in your project) same as repo demo project"tns-android"
and "tns-ios"
properties in the package.json
file of your project) same as repo demo projectpackage.json
file of yournpm run demo.android
Log output:
hp@hp-pc:~/git/nativescript/temp/nativescript-imagecropper/src$ npm run demo.android
> [email protected] demo.android /home/hp/git/nativescript/temp/nativescript-imagecropper/src
> npm i && npm run tsc && cd ../demo && tns run android --syncAllFiles
added 66 packages from 33 contributors and audited 105 packages in 3.041s
found 0 vulnerabilities
> [email protected] tsc /home/hp/git/nativescript/temp/nativescript-imagecropper/src
> tsc -skipLibCheck
Searching for devices...
npm WARN deprecated [email protected]: Switch to the `bfj` package for fixes and new features!
> [email protected] postinstall /home/hp/git/nativescript/temp/nativescript-imagecropper/demo/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js
> [email protected] postinstall /home/hp/git/nativescript/temp/nativescript-imagecropper/demo/node_modules/nativescript-dev-typescript
> node postinstall.js
Project already targets TypeScript ~2.3.0
> [email protected] postinstall /home/hp/git/nativescript/temp/nativescript-imagecropper/demo/node_modules/nativescript-dev-webpack
> node postinstall.js
Creating file: /home/hp/git/nativescript/temp/nativescript-imagecropper/demo/webpack.config.js
Registering script: start-android-bundle
Registering script: start-ios-bundle
Registering script: build-android-bundle
Registering script: build-ios-bundle
NativeScript Webpack plugin was successfully added.
You can now bundle your project with the following npm scripts:
- "npm run build-android-bundle" to build for android.
- "npm run build-ios-bundle" to build for ios.
- "npm run start-android-bundle" to run on android.
- "npm run start-ios-bundle" to run on ios.
You can also pass the "--uglify" flag to use UglifyJS for minification.
For more information check out https://docs.nativescript.org/tooling/bundling-with-webpack#bundling.
> [email protected] postinstall /home/hp/git/nativescript/temp/nativescript-imagecropper/demo/node_modules/nativescript-unit-test-runner
> node postinstall.js
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN demo No description
npm WARN demo No repository field.
npm WARN demo No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
added 755 packages from 898 contributors and audited 3580 packages in 28.52s
found 12 vulnerabilities (9 low, 3 high)
run `npm audit fix` to fix them, or `npm audit` for details
Executing before-watch hook from /home/hp/git/nativescript/temp/nativescript-imagecropper/demo/hooks/before-watch/nativescript-dev-typescript.js
Found peer TypeScript 2.3.4
11:26:31 - Compilation complete. Watching for file changes.
Copying template files...
⠋ Installing tns-android
+ [email protected]
added 1 package and audited 3581 packages in 20.771s
found 12 vulnerabilities (9 low, 3 high)
run `npm audit fix` to fix them, or `npm audit` for details
Project successfully created.
Executing before-prepare hook from /home/hp/git/nativescript/temp/nativescript-imagecropper/demo/hooks/before-prepare/nativescript-dev-typescript.js
Preparing project...
Successfully prepared plugin nativescript-camera for android.
Successfully prepared plugin nativescript-imagecropper for android.
Successfully prepared plugin nativescript-permissions for android.
Successfully prepared plugin nativescript-theme-core for android.
Successfully prepared plugin nativescript-unit-test-runner for android.
Successfully prepared plugin tns-core-modules for android.
Successfully prepared plugin tns-core-modules-widgets for android.
Gradle build...
:config phase: createDefaultIncludeFiles
:config phase: addAarDependencies
+adding dependency: /home/hp/git/nativescript/temp/nativescript-imagecropper/demo/platforms/android/libs/aar/widgets-release.aar
Project successfully prepared (Android)
Executing after-prepare hook from /home/hp/git/nativescript/temp/nativescript-imagecropper/demo/hooks/after-prepare/nativescript-unit-test-runner.js
Building project...
Gradle build...
:config phase: createDefaultIncludeFiles
+found plugins: nativescript-camera
Renaming plugin directory to flavor name: /home/hp/git/nativescript/temp/nativescript-imagecropper/demo/platforms/android/src/nativescript-camera -> /home/hp/git/nativescript/temp/nativescript-imagecropper/demo/platforms/android/src/F0
+found plugins: tns-core-modules-widgets
+ creating include.gradle file for /home/hp/git/nativescript/temp/nativescript-imagecropper/demo/platforms/android/configurations/tns-core-modules-widgets
Renaming plugin directory to flavor name: /home/hp/git/nativescript/temp/nativescript-imagecropper/demo/platforms/android/src/tns-core-modules-widgets -> /home/hp/git/nativescript/temp/nativescript-imagecropper/demo/platforms/android/src/F1
+found plugins: nativescript-imagecropper
FAILURE: Build failed with an exception.
* Where:
Build file '/home/hp/git/nativescript/temp/nativescript-imagecropper/demo/platforms/android/build.gradle' line: 374
* What went wrong:
A problem occurred evaluating root project 'demo'.
> String index out of range: -1
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
Unable to apply changes on device: 1c2c2817. Error is: Command ./gradlew failed with exit code 1.
tns --version
to fetch it)4.1.2
node_modules/tns-core-modules/package.json
file in your project)4.2.0
"tns-android"
and "tns-ios"
properties in the package.json
file of your project)"tns-ios": {
"version": "4.1.0"
},
"tns-android": {
"version": "4.1.3"
}
package.json
file of your "dependencies": {
"@angular/animations": "~6.0.0",
"@angular/common": "~6.0.0",
"@angular/compiler": "~6.0.0",
"@angular/core": "~6.0.0",
"@angular/forms": "~6.0.0",
"@angular/http": "~6.0.0",
"@angular/platform-browser": "~6.0.0",
"@angular/platform-browser-dynamic": "~6.0.0",
"@angular/router": "~6.0.0",
"allow-publish": "^1.0.4",
"base-64": "^0.1.0",
"nativescript-angular": "^6.0.0",
"nativescript-bitmap-factory": "^1.7.1",
"nativescript-camera": "^4.0.2",
"nativescript-imagecropper": "^1.0.4",
"nativescript-loading-indicator": "^2.4.0",
"nativescript-localstorage": "^1.1.5",
"nativescript-modal-datetimepicker": "^1.1.3",
"nativescript-permissions": "^1.2.3",
"nativescript-phone": "^1.3.1",
"nativescript-plugin-firebase": "file:./nativescript-plugin-firebase-6.5.0.tgz",
"nativescript-share-file": "^1.0.4",
"nativescript-theme-core": "^1.0.4",
"nativescript-toast": "^1.4.6",
"nativescript-ui-calendar": "^3.7.0",
"nativescript-ui-sidedrawer": "^4.2.0",
"reflect-metadata": "^0.1.8",
"rxjs": "~6.0.0 || >=6.1.0",
"tns-core-modules": "^4.2.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/core": "~0.6.3",
"@angular/compiler-cli": "~6.0.0",
"@ngtools/webpack": "~6.0.3",
"babel-traverse": "6.4.5",
"babel-types": "6.4.5",
"babylon": "6.4.5",
"clean-webpack-plugin": "~0.1.19",
"copy-webpack-plugin": "~4.5.1",
"css-loader": "~0.28.11",
"extract-text-webpack-plugin": "~3.0.2",
"lazy": "1.0.11",
"nativescript-dev-sass": "^1.6.0",
"nativescript-dev-typescript": "^0.6.0",
"nativescript-dev-webpack": "^0.12.0",
"nativescript-worker-loader": "~0.9.0",
"raw-loader": "~0.5.1",
"resolve-url-loader": "~2.3.0",
"sass-loader": "~7.0.1",
"tns-platform-declarations": "^3.4.1",
"typescript": "~2.7.2",
"uglifyjs-webpack-plugin": "~1.2.5",
"webpack": "~4.6.0",
"webpack-bundle-analyzer": "~2.13.0",
"webpack-cli": "~2.1.3",
"webpack-sources": "~1.1.0"
}
takePhoto()
function. (<button (tap)="takePhoto()"></button>
)JS: Image at: "/storage/emulated/0/Android/data/com.example.test/files/NSIMG_20180822_105016.jpg"
JS: Error cropping image: {
JS: "response": "Error",
JS: "image": null
JS: }
import { ImageSource } from 'tns-core-modules/image-source/image-source';
import { ImageCropper } from 'nativescript-imagecropper';
import * as camera from "nativescript-camera";
import * as app from 'application';
import * as dialogs from "ui/dialogs";
import * as fs from 'tns-core-modules/file-system';
@Component({
selector: "my-page",
moduleId: __filename,
templateUrl: "./my-page.html",
styleUrls: ["./my-page.scss"]
})
export class MyPage {
faceTemp = fs.path.join(fs.knownFolders.temp().path, "face.png");
faceTempExtension = 'png';
doneCropping() {
// Unrelated code here
console.log("This never happens");
}
takePhoto() {
camera.requestPermissions().then(() => {
camera.takePicture({
saveToGallery: false
}).then(imageAsset => {
if (app.android) {
console.log("Image at: " + JSON.stringify(imageAsset.android));
} else {
console.log("IOS image at: " + JSON.stringify(imageAsset.ios));
}
const faceTempSplit = this.faceTemp.split('.');
this.faceTempExtension = faceTempSplit[faceTempSplit.length - 1];
new ImageSource().fromAsset(imageAsset).then(imageSource => {
const imageCropper = new ImageCropper();
imageCropper.show(imageSource, {
width: 250,
height: 250,
lockSquare: true
}).then(cropped => {
switch (cropped.response) {
case 'Success':
if (cropped.image != null) {
cropped.image.saveToFile(this.faceTemp, 'png');
this.doneCropping();
}
break;
case 'Cancelled':
break;
case 'Error':
console.log("Error cropping image!!!");
break;
}
}).catch(err => {
console.log("Error cropping image:", err);
});
}).catch(err => {
console.log("Error getting image source:", err);
});
}).catch(err => {
if (err.message === 'cancelled') return;
dialogs.alert({
title: "Error!",
message: "Error getting image: " + err.message,
okButtonText: "OK"
});
console.log("Error: " + err.message);
});
}).catch(err => {
dialogs.alert({
title: "Error!",
message: "Camera permissions were denied!",
okButtonText: "OK"
});
console.log("Error: " + JSON.stringify(err));
});
}
}
Hello, this is a great package. Could you tell me if I can use more options besides the ones listed below in a nativescript set up?
Option | Type | Description |
---|---|---|
width | number | The width of the image you would like returned. |
height | number | The height of the image you would like returned. |
Specifically
change actionbar color,
specify save location,
change screen background color,
return cropbox x, y, width, and height, image x, y, width, and height
change cropbox aspect ratio
allow only 90 degree rotations (I can rotate image after crop)
change color to black and white(I can change image color after crop)
cropper.show(picture,{width:300,height:300, moreoptions}).then(function(args){
console.log("cropper.cropBoxX" + cropper.cropBoxX);
console.log("cropper.cropBoxY" + cropper.cropBoxY);
console.log("cropper.cropBoxWidth" + cropper.cropBoxWidth);
console.log("cropper.cropBoxHeight" + cropper.cropBoxHeight);
console.log(JSON.stringify(args));
})
.catch(function(e){
console.log(e);
});
The native libraries this plugin uses, both Android and iOS, are quite outdated: uCrop is at 2.2.1 (the plugin is using 1.5.0), and TOCropViewController is at 2.3.6 (the plugin is using 1.3.3).
I've run into some issues on both Android and iOS, and because they are specifically UI issues, I'm 100% sure they come from the native libraries rather than the plugin itself. Upgrading them, therefore, might not only solve these issues (and a lot more), but also bring in new features like #18 and (in the case of iOS) iPhone X support.
i want to konw if i don‘t want to save the change of the picture , i press the cancel,and i want to write some
code for the cancel, how i need to do,can you show me?
Added the plugin to my project, carried out the modification in Androidmanifest.xml and defined in my js - var imageCropper = require("nativescript-imagecropper");
.. trying to build the app gives out the following error.. Need help here.
java.lang.RuntimeException: Unable to start activity ComponentInfo{org.nativescript.MissingPerson/com.tns.NativeScriptActivity}: com.tns.NativeScriptException:
Calling js method onCreate failed
TypeError: Cannot read property 'ucrop' of undefined
File: ", line: 1, column: 265
StackTrace:
Frame: function:'', file:'/data/data/org.nativescript.MissingPerson/files/app/tns_modules/nativescript-imagecropper/imagecropper.js', line: 8, column: 25
Frame: function:'require', file:'', line: 1, column: 266
Frame: function:'', file:'/data/data/org.nativescript.MissingPerson/files/app/shared/utils/utils.js', line: 5, column: 20
Frame: function:'require', file:'', line: 1, column: 266
Frame: function:'', file:'/data/data/org.nativescript.MissingPerson/files/app/views/login/login.js', line: 5, column: 13
Frame: function:'require', file:'', line: 1, column: 266
Frame: function:'global.loadModule', file:'/data/data/org.nativescript.MissingPerson/files/app/tns_modules/globals/globals.js', line: 19, column: 16
Frame: function:'resolvePageFromEntry', file:'/data/data/org.nativescript.MissingPerson/files/app/tns_modules/ui/frame/frame-common.js', line: 72, column: 40
Frame: function:'Frame.navigate', file:'/data/data/org.nativescript.MissingPerson/files/app/tns_modules/ui/frame/frame-common.js', line: 148, column: 20
Frame: function:'NativeScriptActivity.onCreate', file:'/data/data/org.nativescript.MissingPerson/files/app/tns_modules/ui/frame/frame.js', line: 616, column: 19
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2808)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2873)
at android.app.ActivityThread.access$900(ActivityThread.java:181)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1482)
at android.os.Handler.dispatchMessage(Handler.java:102)
at android.os.Looper.loop(Looper.java:145)
at android.app.ActivityThread.main(ActivityThread.java:6145)
at java.lang.reflect.Method.invoke(Native Method)
at java.lang.reflect.Method.invoke(Method.java:372)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1399)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1194)
Caused by: com.tns.NativeScriptException:
Calling js method onCreate failed
TypeError: Cannot read property 'ucrop' of undefined
File: ", line: 1, column: 265
StackTrace:
Frame: function:'', file:'/data/data/org.nativescript.MissingPerson/files/app/tns_modules/nativescript-imagecropper/imagecropper.js', line: 8, column: 25
Frame: function:'require', file:'', line: 1, column: 266
Frame: function:'', file:'/data/data/org.nativescript.MissingPerson/files/app/shared/utils/utils.js', line: 5, column: 20
Frame: function:'require', file:'', line: 1, column: 266
Frame: function:'', file:'/data/data/org.nativescript.MissingPerson/files/app/views/login/login.js', line: 5, column: 13
Frame: function:'require', file:'', line: 1, column: 266
Frame: function:'global.loadModule', file:'/data/data/org.nativescript.MissingPerson/files/app/tns_modules/globals/globals.js', line: 19, column: 16
Frame: function:'resolvePageFromEntry', file:'/data/data/org.nativescript.MissingPerson/files/app/tns_modules/ui/frame/frame-common.js', line: 72, column: 40
Frame: function:'Frame.navigate', file:'/data/data/org.nativescript.MissingPerson/files/app/tns_modules/ui/frame/frame-common.js', line: 148, column: 20
Frame: function:'NativeScriptActivity.onCreate', file:'/data/data/org.nativescript.MissingPerson/files/app/tns_modules/ui/frame/frame.js', line: 616, column: 19
at com.tns.Platform.callJSMethodNative(Native Method)
at com.tns.Platform.dispatchCallJSMethodNative(Platform.java:816)
at com.tns.Platform.callJSMethod(Platform.java:715)
at com.tns.Platform.callJSMethod(Platform.java:694)
at com.tns.Platform.callJSMethod(Platform.java:684)
at com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:14)
at android.app.Activity.performCreate(Activity.java:6374)
at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1119)
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2752)
... 10 more
Is there any way to alter the text on the buttons inside the cropper? I would like to give the "Done" and "Cancel" buttons some other text.
Add this to the README:
You can override library colors just specifying colors with the same names in your colors.xml file.
For example:
<color name="ucrop_color_toolbar">#000000</color>
will make toolbar color black if specified inside you application colors.xml file.
IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.
Android
Trying to open up the modal for cropping the image crashes the app giving the exception occurring above.
plain old method invocation results into this error.
imageCropper.show(imageSource)
Hi
imageCropper.show method directly hits catch block and throws following error in the console:
JS: ==== object dump start ====
JS: response: “Error”
JS: image: “null”
JS: ==== object dump end ====
I have searched for the similar issue in the forum but it seems no one has posted yet.
I have taken the snippet from the npmjs document :
camera.takePicture({width:500,height:500,keepAspectRatio:true})
.then(function (imageAsset) {
var source = new imageSource.ImageSource();
var imageCropper = new ImageCropper.ImageCropper();
source.fromAsset(imageAsset).then((imageSource1) => {
imageCropper.show(imageSource1,{lockSquare: true}).then((args) => {
if(args.image !== null){
imageView.imageSource = args.image;
}
})
.catch(function(e){
console.dir(e);
});
})
This issue occuring in both emulator and real mobiles with Android.
following are the dependencies and their versions I am using
Package.json:
“dependencies”: {
“nativescript-background-http”: “^3.3.0”,
“nativescript-bitmap-factory”: “^1.7.1”,
“nativescript-camera”: “^4.0.2”,
“nativescript-imagecropper”: “^1.0.4”,
“nativescript-imagepicker”: “^6.0.3”,
“nativescript-theme-core”: “~1.0.4”,
“tns-core-modules”: “^4.2.0”
}
please help.
Thanks in advance.
Is there any way to enforce the cropped image comes out with a certain dimension even if scaled?
hi, i trying to use this plugin but when image editor is closed the app is freezing for some seconds
my config:
my source:
const context = imagepicker.create({mode: 'single'});
context.authorize()
.then(() => {
context.present()
.then((selection) => {
selection.forEach((selected) => {
selected.getImageAsync((source) => {
const selectedImgSource = fromNativeSource(source);
new ImageCropper().show(selectedImgSource, {height: 500, width: 500})
.then((args) => {
console.log('success')
})
.catch((e) => {
console.error(e);
})
})
});
})
});
I'm using nativescript-angular and when I use the image cropper inside a modal view its not working at all. But when I call it on a page it works as expected. I don't know if im doing it right. But i really need this feature on my app :(
I am calling the function after I receive an image from NS Camera+.
resizeImage(){ var imageCropper = new this.ImageCropper(); var width = 850; var height = 540; if(!this.horizontal){ width = 540; height = 850; } imageCropper.show(this.originalImage,{width:width,height:height}).then((args) => { if(args.image !== null){ this.imageSource = args.image; } }) .catch(function(e){ console.log(JSON.stringify(e)); alert("Please make sure that your ID is the only thing visible in the image."); this.resizeImage(); }); }
This was working at some point and I haven't touched the code but somewhere along the line it broke and I didn't realize it until recently as I have been working in other parts of my apps. The only things that would've changed are versions (TNS, Angular, iOS Platform, other plugins).
I use this plugin and it works well. But I need to crop image in auto mode - without interface.
Can you add function or method to crop image to neccessary dimentions without any interface?
For example: imagCropper.crop(imageSource, { resultWidth, resultHeight })
or more flexible: imagCropper.crop(imageSource, { startX, startY, resultWidth, resultHeight })
I am getting a few warnings when running an IOS build with NativeScript. The main issue is that changes in orientation are not being handled correctly. When rotating the phone, I can see that the orientation change event is registering and correctly recognizes the new orientation but the view does not adjust appropriately.
My guess is that this behavior is related to the warnings generated below.
I have gone through the latest update process and should be up to date on everything. I have not been able to find any issues related to these warnings and NativeScript anywhere. Does anyone know anything about how to solve this issue.
`[19-03-14 10:27:30.059] (CLI) 3 warnings generated.
[19-03-14 10:27:30.833] (CLI) ****/platforms/ios/Pods/TOCropViewController/Objective-C/TOCropViewController/TOCropViewController.m:458:1: warning: implementing deprecated method [-Wdeprecated-implementations]
[19-03-14 10:27:30.833] (CLI) - (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
[19-03-14 10:27:30.833] (CLI) ^ [19-03-14 10:27:30.833] (CLI) In module 'UIKit' imported from /Users/benjaminb/Desktop/projects/HelloWorld/platforms/ios/Pods/Target Support Files/TOCropViewController/TOCropViewController-prefix.pch:2: [19-03-14 10:27:30.833] (CLI)
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS12.1.sdk/System/Library/Frameworks/UIKit.framework/Headers/UIViewController.h:328:1: note: method 'willRotateToInterfaceOrientation:duration:' declared here
[19-03-14 10:27:30.833] (CLI) - (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration NS_DEPRECATED_IOS(2_0,8_0, "Implement viewWillTransitionToSize:withTransitionCoordinator: instead") __TVOS_PROHIBITED; [19-03-14 10:27:30.833] (CLI) ^ [19-03-14 10:27:30.833] (CLI) ***/platforms/ios/Pods/TOCropViewController/Objective-C/TOCropViewController/TOCropViewController.m:490:1: warning: implementing deprecated method [-Wdeprecated-implementations]
[19-03-14 10:27:30.833] (CLI) - (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
[19-03-14 10:27:30.833] (CLI) ^ [19-03-14 10:27:30.833] (CLI) In module 'UIKit' imported from ****/platforms/ios/Pods/Target Support Files/TOCropViewController/TOCropViewController-prefix.pch:2: [19-03-14 10:27:30.833] (CLI)
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS12.1.sdk/System/Library/Frameworks/UIKit.framework/Headers/UIViewController.h:331:1: note: method 'willAnimateRotationToInterfaceOrientation:duration:' declared here
[19-03-14 10:27:30.833] (CLI) - (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration NS_DEPRECATED_IOS(3_0,8_0, "Implement viewWillTransitionToSize:withTransitionCoordinator: instead") __TVOS_PROHIBITED;
[19-03-14 10:27:30.833] (CLI) ^ [19-03-14 10:27:30.833] (CLI) ****/platforms/ios/Pods/TOCropViewController/Objective-C/TOCropViewController/TOCropViewController.m:515:1: warning: implementing deprecated method [-Wdeprecated-implementations]
[19-03-14 10:27:30.833] (CLI) - (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation [19-03-14 10:27:30.833] (CLI) ^ [19-03-14 10:27:30.833] (CLI) In module 'UIKit' imported from ***/platforms/ios/Pods/Target Support Files/TOCropViewController/TOCropViewController-prefix.pch:2:
[19-03-14 10:27:30.833] (CLI) /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS12.1.sdk/System/Library/Frameworks/UIKit.framework/Headers/UIViewController.h:329:1: note: method 'didRotateFromInterfaceOrientation:' declared here
[19-03-14 10:27:30.833] (CLI) - (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation NS_DEPRECATED_IOS(2_0,8_0) __TVOS_PROHIBITED; [19-03-14 10:27:30.833] (CLI) ^`
Just add to project (tns plugin add nativescript-imagecropper) and try building. Maybe include it somewhere.
On a clean build (rm -R hooks platforms node_modules package-lock.json) I get:
FAILURE: Build failed with an exception.
A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
Android resource linking failed
/platforms/tempPlugin/nativescript_imagecropper/src/main/AndroidManifest.xml:3:3-5:17: AAPT: error: attribute android:requestLegacyExternalStorage not found.
Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
Get more help at https://help.gradle.org
Hey after install the plugin and write code to use its functionality I tried to build my project and this is build error:
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':transformClassesWithDexForF0F1F2F3F4F5F6F7F8F9Debug'.
>
com.android.build.api.transform.TransformException: com.android.ide.common.process.ProcessException: java.util.concurrent.ExecutionException: com.android.dex.DexIndexOverflowException: method ID not in [0, 0xffff]: 65536
"dependencies": {
"@angular/animations": "~4.2.0",
"@angular/common": "~4.2.0",
"@angular/compiler": "~4.2.0",
"@angular/core": "~4.2.0",
"@angular/forms": "~4.2.0",
"@angular/http": "~4.2.0",
"@angular/platform-browser": "~4.2.0",
"@angular/platform-browser-dynamic": "~4.2.0",
"@angular/router": "~4.2.0",
"email-validator": "^1.1.1",
"font-awesome": "^4.7.0",
"nativescript-angular": "~4.2.0",
"nativescript-background-http": "^3.0.0",
"nativescript-bitmap-factory": "^1.7.1",
"nativescript-calendar": "^1.2.2",
"nativescript-camera": "^3.0.1",
"nativescript-floatingactionbutton": "^3.0.1",
"nativescript-imagecropper": "^0.1.2",
"nativescript-imagepicker": "^3.0.4",
"nativescript-plugin-firebase": "^4.0.5",
"nativescript-pro-ui": "^3.2.0",
"nativescript-sqlite": "^1.1.7",
"nativescript-theme-core": "~1.0.2",
"nativescript-web-image-cache": "^4.2.2",
"password-validator": "^4.0.0",
"reflect-metadata": "~0.1.8",
"rxjs": "~5.3.0",
"tns-core-modules": "^3.3.0",
"typescript-collections": "^1.2.3",
"zone.js": "~0.8.2"
},
"devDependencies": {
"babel-traverse": "6.4.5",
"babel-types": "6.4.5",
"babylon": "6.4.5",
"lazy": "1.0.11",
"nativescript-dev-typescript": "~0.4.0",
"typescript": "~2.2.1"
}
nativescript version 5.1
please I cant find how to use this plugin !
it just takes photos, I cant see any way to crop taken photos !!!!
Hi @bthurlow,
your plugin is very helpful and almost perfect for our purpose.
Do you think is it possible adding an option to customize the label "Edit Photo" in the android status bar?
Thanks.
iOS
iOS versions : 13.1.2
I have tested in device
CLI: 6.1.2
Runtime(s): 6.1.1
node_modules/tns-core-modules/package.json
file in your project)
Plugin(s): nativescript-imagecropper": "2.0.0"
In ios 13.1.2 when I am capture image from camera then some time image cropper is not working as expected. Sometimes I can able to crop image first time but then not able to crop an image.
I am getting below warning
Warning: Attempt to present <TOCropViewController: 0x110a64a00> on <UIImagePickerController: 0x110194800> whose view is not in the window hierarchy!
Servicing an explicit request to stop the session using -[AVCaptureSession stopRunning] regardless of whether it is running or not
Immediately enabling application idle timer
[CAMCaptureEngine] Got AVCaptureSession did stop running notification: NSConcreteNotification 0x2818bd3b0 {name = AVCaptureSessionDidStopRunningNotification; object = <AVCaptureSession: 0x280c95560 [AVCaptureSessionPresetPhoto]>
How can I run this plugin in
nativescript: 2.5.4
tns-core-modules: 2.5.2
thanks in advance.
is there a way to set the square to be the initial dimension for android ?
Hi,
Thank you for brilliant plugin. I tried demo app it works fine. After I tried with image picker plugin https://github.com/NativeScript/nativescript-imagepicker and it worked perfectly fine as well (here is working example):
let context = imagepicker.create({
mode: "single"
});
context
.authorize()
.then(function() {
return context.present();
})
.then((selection) => {
selection.forEach((selected) => {
selected.getImage()
.then((imageSource) => {
this.imageCropper.show(imageSource).then((args) => {
if(args.image !== null){
let folder = fs.knownFolders.temp();
var path = fs.path.join(folder.path, "savedImage.png");
var saved = args.image.saveToFile(path,'png');
}
})
});
});
}).catch(function (e) {
console.log(e);
});
But when I tried to implement with media file picker plugin https://github.com/jibon57/nativescript-mediafilepicker, I am having issues. Image is displayed in the cropper, I can edit the image, but as soon as I click "done", cropper disappears(as it should be ) but I don't get any response in console or args value.
Here is code which is not working:
let options: MediaFilepickerOptions = {
android: {
mxcount: 1,
enableImagePicker: true,
enableVideoPicker: false,
enableCameraSupport: false,
},
ios: {
allowsMultipleSelection: false,
// title: "Album",
showCameraButton: false,
autoSelectCameraImages: true,
}
};
this.mediafilepicker = new Mediafilepicker();
this.mediafilepicker.on("getFiles", (res: any) => {
let files = res.files;
if (files.length > 0) {
files = files.split(",");
files.forEach(file => {
let img = imageSource.fromFile(file);
this.imageCropper.show(img, this.cropperOptions).then((args) => {
console.log("response");
console.dir(args)
if(args.image !== null){
let folder = fs.knownFolders.temp();
var path = fs.path.join(folder.path, "savedImage.png");
var saved = args.image.saveToFile(path,'png');
}
})
})
}
})
this.mediafilepicker.startFilePicker(options);
Do you have any idea why it is not working? Any advice or help is highly appreciated. Thank you?
"dependencies": {
"@angular/animations": "file:../../node_modules/@angular/animations",
"@angular/common": "file:../../node_modules/@angular/common",
"@angular/compiler": "file:../../node_modules/@angular/compiler",
"@angular/core": "file:../../node_modules/@angular/core",
"@angular/forms": "file:../../node_modules/@angular/forms",
"@angular/platform-browser": "file:../../node_modules/@angular/platform-browser",
"@angular/platform-browser-dynamic": "file:../../node_modules/@angular/platform-browser-dynamic",
"@angular/router": "file:../../node_modules/@angular/router",
"@ngrx/effects": "file:../../node_modules/@ngrx/effects",
"@ngrx/router-store": "file:../../node_modules/@ngrx/router-store",
"@ngrx/store": "file:../../node_modules/@ngrx/store",
"@ngx-translate/core": "file:../../node_modules/@ngx-translate/core",
"@nrwl/nx": "file:../../node_modules/@nrwl/nx",
"@nstudio/nativescript-camera-plus": "file:../../node_modules/@nstudio/nativescript-camera-plus",
"@pnp/nativescript": "file:../../xplat/nativescript",
"@pnp/nativescript-game-ar": "file:../../xplat/nativescript/plugins/nativescript-game-ar",
"@pnp/nativescript-games": "file:../../xplat/nativescript/plugins/nativescript-games",
"@pnp/scss": "file:../../libs/scss",
"date-fns": "file:../../node_modules/date-fns",
"nativescript-angular": "file:../../node_modules/nativescript-angular",
"nativescript-audio": "file:../../node_modules/nativescript-audio",
"nativescript-background-http": "file:../../node_modules/nativescript-background-http",
"nativescript-cardview": "file:../../node_modules/nativescript-cardview",
"nativescript-checkbox": "file:../../node_modules/nativescript-checkbox",
"nativescript-downloader": "file:../../node_modules/nativescript-downloader",
"nativescript-drop-down": "file:../../node_modules/nativescript-drop-down",
"nativescript-exoplayer": "file:../../node_modules/nativescript-exoplayer",
"nativescript-feedback": "file:../../node_modules/nativescript-feedback",
"nativescript-fresco": "file:../../node_modules/nativescript-fresco",
"nativescript-imagecropper": "file:../../node_modules/nativescript-imagecropper",
"nativescript-imagepicker": "file:../../node_modules/nativescript-imagepicker",
"nativescript-iqkeyboardmanager": "file:../../node_modules/nativescript-iqkeyboardmanager",
"nativescript-loading-indicator": "file:../../node_modules/nativescript-loading-indicator",
"nativescript-ngx-fonticon": "file:../../node_modules/nativescript-ngx-fonticon",
"nativescript-ngx-slides": "file:../../node_modules/nativescript-ngx-slides",
"nativescript-payments": "file:../../node_modules/nativescript-payments",
"nativescript-permissions": "file:../../node_modules/nativescript-permissions",
"nativescript-plugin-appsflyer": "file:../../node_modules/nativescript-plugin-appsflyer",
"nativescript-plugin-firebase": "file:../../node_modules/nativescript-plugin-firebase",
"nativescript-pusher": "file:../../node_modules/nativescript-pusher",
"nativescript-shimmer": "file:../../node_modules/nativescript-shimmer",
"nativescript-social-share": "file:../../node_modules/nativescript-social-share",
"nativescript-theme-core": "file:../../node_modules/nativescript-theme-core",
"nativescript-timedatepicker": "file:../../node_modules/nativescript-timedatepicker",
"nativescript-toasts": "file:../../node_modules/nativescript-toasts",
"nativescript-ui-listview": "file:../../xplat/nativescript/plugins/nativescript-ui-listview-3.7.1-pr69.tgz",
"nativescript-ui-sidedrawer": "~4.3.0",
"nativescript-zendesk-sdk": "file:../../node_modules/nativescript-zendesk-sdk",
"reflect-metadata": "file:../../node_modules/reflect-metadata",
"rxjs": "file:../../node_modules/rxjs",
"rxjs-compat": "file:../../node_modules/rxjs-compat",
"tns-core-modules": "file:../../node_modules/tns-core-modules",
"tns-core-modules-widgets": "file:../../node_modules/tns-core-modules-widgets",
"zone.js": "file:../../node_modules/zone.js",
"~app-plugin-last": "file:tools/~app-plugin-last"
},
"devDependencies": {
"@angular/compiler-cli": "~6.1.0",
"@angular/language-service": "file:../../node_modules/@angular/language-service",
"@ngtools/webpack": "~6.2.1",
"codelyzer": "file:../../node_modules/codelyzer",
"nativescript-dev-webpack": "~0.16.0",
"tns-platform-declarations": "file:../../node_modules/tns-platform-declarations",
"typescript": "file:../../node_modules/typescript"
}
Steps to reproduce:
I have upgraded nativescript 6.1.2. After that in IOS 12.2 image cropping is not working. but in IOS 13.0 image cropping is working. also I have checked with nativescript-imagecropper": "1.0.7" still I can not crop image in iOS 12 but can crop image in iOS 13
Please, ensure your title is less than 63 characters long and starts with a capital
letter.
iOS/Android/Both
iOS
iOS/Android versions
11.3
emulator or device. What type of device?
device - iPhone 7
CLI: (run tns --version
to fetch it)
4.1.1
Cross-platform modules: (check the 'version' attribute in the
node_modules/tns-core-modules/package.json
file in your project)
it's the ios demo
Runtime(s): (look for the "tns-android"
and "tns-ios"
properties in the package.json
file of your project)
it's the ios demo
Plugin(s): (look for the version numbers in the package.json
file of your
project and paste your dependencies and devDependencies here)
it's the ios demo
Describe the steps to reproduce it.
npm run demo.ios
from src
directoryI have not made any code edits. I just cloned the repo and tried to run the demo.
I get this error now when trying to build for android:
* What went wrong:
Execution failed for task ':transformResourcesWithMergeJavaResForF0F1F2F3F4F5F6F7F8Debug'.
> com.android.build.api.transform.TransformException: com.android.builder.packaging.DuplicateFileException: Duplicate files copied in APK META-INF/maven/com.squareup.okio/okio/pom.xml
File1: /Users/davecoffin/.gradle/caches/modules-2/files-2.1/com.squareup.okio/okio/1.6.0/98476622f10715998eacf9240d6b479f12c66143/okio-1.6.0.jar
File2: /Users/davecoffin/Develop/Cubby Notes/pocketnanny/platforms/android/build/intermediates/exploded-aar/com.google.android.gms/play-services-basement/11.0.0/jars/classes.jar
Any idea why? Heres what i am running for versions:
┌──────────────────┬─────────────────┬────────────────┬──────────────────┐
│ Component │ Current version │ Latest version │ Information │
│ nativescript │ 2.5.5 │ 3.0.3 │ Update available │
│ tns-core-modules │ 2.5.2 │ 3.0.1 │ Update available │
│ tns-android │ 2.5.0 │ 3.0.1 │ Update available │
│ tns-ios │ 2.5.1 │ 3.0.1 │ Update available │
└──────────────────┴─────────────────┴────────────────┴──────────────────┘
Android
{
"description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"readme": "NativeScript Application",
"repository": "<fill-your-repository-here>",
"nativescript": {
"id": "org.nativescript.testing",
"tns-android": {
"version": "3.4.1"
}
},
"dependencies": {
"nativescript-camera": "^3.2.1",
"nativescript-hprt": "^0.9.7",
"nativescript-imagecropper": "^0.1.2",
"nativescript-plugin-seed": "^1.0.2",
"nativescript-pro-ui": "^3.3.0",
"nativescript-theme-core": "~1.0.4",
"tns-core-modules": "~3.4.0"
},
"devDependencies": {
"babel-traverse": "6.26.0",
"babel-types": "6.26.0",
"babylon": "6.18.0",
"copy-webpack-plugin": "~4.3.0",
"css-loader": "~0.28.7",
"extract-text-webpack-plugin": "~3.0.2",
"lazy": "1.0.11",
"nativescript-dev-webpack": "^0.9.0",
"nativescript-worker-loader": "~0.8.1",
"raw-loader": "~0.5.1",
"resolve-url-loader": "~2.2.1",
"uglifyjs-webpack-plugin": "~1.1.6",
"webpack": "~3.10.0",
"webpack-bundle-analyzer": "^2.9.1",
"webpack-sources": "~1.1.0"
}
}
In version 0.1.2 or 0.1.0 also null;
var UCrop = com.yalantis.ucrop.UCrop;
Isn't need add jar or aar file into folder?
And I try follow your step installation --> https://i.imgur.com/RdgN8Eu.png , but also get null.
Unable to apply changes on device: 79BMADR7QZD25. Error is: Failed to build plugin nativescript-imagecropper :
Error: Command gradlew.bat failed with exit code 1 Error output:
C:\Users\Administrator.gradle\caches\transforms-1\files-1.1\ucrop-2.2.2-native.aar\bfa85db65d82ba41411e23f89fa6657f\res\values\values.xml:72:5-77:13: AAPT: resource attr/selectableItemBackground (aka org.nativescript.nativescript_imagecropper:attr/selectableItemBackground) not found.
D:\HelloWorld\platforms\tempPlugin\nativescript_imagecropper\build\intermediates\res\merged\release\values\values.xml:75: AAPT: resource attr/selectableItemBackgroundBorderless (aka org.nativescript.nativescript_imagecropper:attr/selectableItemBackgroundBorderless) not found.
D:\HelloWorld\platforms\tempPlugin\nativescript_imagecropper\build\intermediates\res\merged\release\values\values.xml:69: error: resource attr/selectableItemBackground (aka org.nativescript.nativescript_imagecropper:attr/selectableItemBackground) not found.
D:\HelloWorld\platforms\tempPlugin\nativescript_imagecropper\build\intermediates\res\merged\release\values\values.xml:75: error: resource attr/selectableItemBackgroundBorderless (aka org.nativescript.nativescript_imagecropper:attr/selectableItemBackgroundBorderless) not found.
error: failed linking references.
FAILURE: Build failed with an exception.
What went wrong:
Execution failed for task ':verifyReleaseResources'.
com.android.ide.common.process.ProcessException: Failed to execute aapt
Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
Get more help at https://help.gradle.org
BUILD FAILED in 7s
"dependencies": {
"nativescript-camera": "^4.1.1",
"nativescript-imagecropper": "^1.0.4",
"nativescript-theme-core": "~1.0.4",
"nativescript-vue": "~2.0.0",
"tns-core-modules": "~5.1.0"
},
"devDependencies": {
"@babel/core": "~7.1.0",
"@babel/preset-env": "~7.1.0",
"babel-loader": "~8.0.0",
"nativescript-dev-webpack": "~0.18.0",
"nativescript-vue-template-compiler": "~2.0.0",
"node-sass": "~4.9.0",
"vue-loader": "~15.4.0"
},
When I import nativescript-imagecropper
with the app described below and then run tns preview --bundle
, the app crashes with this stack trace:
2018-12-27 17:48:46.771 nsplaydev[1328:310859] ***** Fatal JavaScript exception - application has been terminated. *****
2018-12-27 17:48:46.771 nsplaydev[1328:310859] Native stack trace:
1 0x10094d194 NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool, bool)
2 0x100983720 -[TNSRuntime executeModule:referredBy:]
3 0x1007b7b78 -[UIApplication(PlayLiveSync) swizzled_executeModule:]
4 0x10022b4f4
5 0x2024c9050 <redacted>
2018-12-27 17:48:46.771 nsplaydev[1328:310859] JavaScript stack trace:
2018-12-27 17:48:46.771 nsplaydev[1328:310859] 1 @file:///app/vendor.js:215:81
2 ../node_modules/nativescript-imagecropper/imagecropper.js@file:///app/vendor.js:217:2
3 __webpack_require__@file:///app/bundle.js:76:34
4 @file:///app/bundle.js:226:41
5 ./app.js@file:///app/bundle.js:282:34
6 __webpack_require__@file:///app/bundle.js:76:34
7 checkDeferredModules@file:///app/bundle.js:45:42
8 @file:///app/bundle.js:149:38
9 anonymous@file:///app/bundle.js:150:12
10 evaluate@[native code]
11 moduleEvaluation@[native code]
12 promiseReactionJob@[native code]
13 require@[native code]
14 anonymous@file:///app/starter.js:2:8
15 evaluate@[native code]
16 moduleEvaluation@[native code]
17 promiseReactionJob@[native code]
2018-12-27 17:48:46.771 nsplaydev[1328:310859] JavaScript error:
file:///app/vendor.js:215:81: JS ERROR ReferenceError: Can't find variable: TOCropViewControllerDelegate
2018-12-27 17:48:46.773 nsplaydev[1328:310859] PlayLiveSync: Uncaught Exception
2018-12-27 17:48:46.773 nsplaydev[1328:310859] *** JavaScript call stack:
(
)
2018-12-27 17:48:46.773 nsplaydev[1328:310859] *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: ReferenceError: Can't find variable: TOCropViewControllerDelegate
at
1 @file:///app/vendor.js:215:81
2 ../node_modules/nativescript-imagecropper/imagecropper.js@file:///app/vendor.js:217:2
3 __webpack_require__@file:///app/bundle.js:76:34
4 @file:///app/bundle.js:226:41
5 ./app.js@file:///app/bundle.js:282:34
6 __webpack_require__@file:///app/bundle.js:76:34
7 checkDeferredModules@file:///app/bundle.js:45:42
8 @file:///app/bundle.js:149:38
9 anonymous@file:///app/bundle.js:150:12
10 evaluate@[native code]
11 moduleEvaluation@[native code]
12 promiseReactionJob@[native code]
13 require@[native code]
14 anonymous@file:///app/starter.js:2:8
15 evaluate@[native code]
16 moduleEvaluation@[native code]
17 promiseReactionJob@[native code]
', reason: '(null)'
*** First throw call stack:
(0x202a8bf50 0x201c88284 0x10094d544 0x100983720 0x1007b7b78 0x10022b4f4 0x2024c9050)
libc++abi.dylib: terminating with uncaught exception of type NSException
2018-12-27 17:48:46.773 nsplaydev[1328:310859] PlayLiveSync: Uncaught Exception
The problem seems to be with the TOCropViewControllerDelegate
reference in imagecropper.ios.ts.
tns create
and install nativescript-imagecropperconst Vue = require("nativescript-vue");
const ImageCropper = require("nativescript-imagecropper").ImageCropper;
const camera = require("nativescript-camera");
const imageSource = require("image-source");
new Vue({
data: function() {
var obj = {
image_src: ""
}
return obj;
},
mounted: function() {
setTimeout(() => {
camera.requestPermissions();
});
},
methods: {
do_capture: function() {
var self = this;
camera.takePicture({width:300,height:300,keepAspectRatio:true})
.then((imageAsset) => {
let source = new imageSource.ImageSource();
source.fromAsset(imageAsset).then((picture) => {
var imageCropper = new ImageCropper();
imageCropper.show(picture).then(function(args){
self.image_src = args.image;
})
.catch(function(e){
console.log(e);
});
});
}).catch((err) => {
console.log("Error -> " + err.message);
});
}
},
template: `
<page class="page">
<action-bar title="Home" class="action-bar"></action-bar>
<scroll-view>
<stack-layout class="home-panel">
<!--Add your page content here-->
<button textWrap="true" class="h2 description-label" v-on:tap="do_capture">Tap for Cam</button>
<image v-bind:src="image_src" />
</stack-layout>
</scroll-view>
</page>
`,
}).$start();
Whenever the cropper finishes on Android, it returns everything properly. However, when the cropper activity closes, it causes the entire app to crash without any visible error. I've dug through the device logs, but the only thing I could see was something like InputDispatcher: Attempted to unregister already unregistered input channel
Is it possible I'm doing something wrong? Or is this a bug in the underlying code?
Hi!
I was wondering how I can get this working NativeScript Angular.
Are there any special requirements or steps needed?
camera.takePicture({width:300,height:300,keepAspectRatio:true})
.then((imageAsset) => {
let source = new imageSource.ImageSource();
source.fromAsset(imageAsset).then((imageSource1) => {
var imageCropper = new icModule.ImageCropper();
imageCropper.show(imageSource1).then((args) => {
console.dir(args);
if(args.image !== null){
imageView.src = args.image;
}
})
.catch(function(e){
console.dir(e);
});
});
}).catch((err) => {
console.log("Error -> " + err.message);
});
TypeError: undefined is not an object (evaluating ‘_options.lockSquare’)
# platform
-Nativescript(iOS)
# versions
# plugins
tns plugin add nativescript-imagecropper
tns plugin add nativescript-camera
Please, ensure your title is less than 63 characters long and starts with a capital
letter.
tns --version
to fetch it): 3.4.0node_modules/tns-core-modules/package.json
file in your project)"tns-android"
and "tns-ios"
properties in the package.json
file of your project)package.json
file of yourDescribe the steps to reproduce it.
1.) git clone https://github.com/bthurlow/nativescript-imagecropper.git
2.) cd nativescript-imagecropper
3.) cd demo
4.) tns run android
error:
System.err: java.lang.RuntimeException: Unable to start activity ComponentInfo{org.nativescript.demo/com.tns.NativeScriptActivity}: com.tns.NativeScri ptException: Failed to find module: "nativescript-imagecropper", relative to: app/tns_modules/ System.err: at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2696) System.err: at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2757) System.err: at android.app.ActivityThread.-wrap12(ActivityThread.java) System.err: at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1504) System.err: at android.os.Handler.dispatchMessage(Handler.java:102) System.err: at android.os.Looper.loop(Looper.java:163) System.err: at android.app.ActivityThread.main(ActivityThread.java:6237) System.err: at java.lang.reflect.Method.invoke(Native Method) System.err: at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:877)
This plugin does not work with webpack. The issue is described here:
NativeScript/nativescript-dev-webpack#8
-> As a workaround, we removed "use strict" and the __export in the beginning manually.
Since there are many corner cases around iOS views, we should create test cases to cover various views regarding #54 #51 about ImageCropper modal not correctly popping up.
It would also help to make e2e test as well
This tests are not urgent but should be covered when possible.
In the mean while, please provide example view scenarios that needs to be covered.
So there is this open Pull request that apparently fixes the webpack support.
Any ideas how can I get it working at least locally?
At the moment, the error is:
ERROR in ./src/test/test.service.ts
Module not found: Error: Can't resolve 'nativescript-imagecropper' in 'C:\test\app\src\test'
...
Is this plugin compatible?
The problem occurs only for iPhones devices:
Steps to reproduce (In the test app that I've attached):
The imagecropper screen will not show, the app will freeze and after and after that it crashes.
│ Component │ Current version
│ nativescript │ 3.4.1
│ tns-core-modules │ 3.1.1
│ tns-ios │ 3.3.0
Please, ensure your title is less than 63 characters long and starts with a capital
letter.
Describe the steps to reproduce it.
I have upgraded nativescript 6.1.2. After that it is not working in Android API 28 and 29.
Plugin version: 1.0.7
NativeScript Version: 6.0.2
OS: iOS
When using the cropping tool with the camera plugin (such as in the example given in the documentation of this plugin), the crop view controller will not appear. The promise neither is resolved nor rejected. Nothing happens.
However, if you put a setTimeout
around the imageCropper.show
call, the imageCropper will appear after the interval. I think this is due to the fact that the ImageCropper is trying to present the view controller before or at the same time as the camera viewcontroller is on the screen or animating out.
This did not seem to be the case in earlier version. It seemed to work fine there.
I suspect this may have something to do with the weird while loop that runs until there is no presented viewcontroller. This is really not a good way of accomplishing that. And I suspect it might be part of the problem.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.