Ionic-native: Ionic 3.3.0 iOS Problems displaying <img> drawings from the camera
_From @aspidvip on May 30, 2017 5:30_
Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/driftyco/ionic-v1)
[ ] 2.x
[ x ] 3.3.0
Related code:
foto.html
<ion-content>
<div *ngIf="base64Image.length>0">
<div *ngFor="let img of base64Image">
<img (press)="DelFoto(img)" style="width:100%; height: 100%;" [src]="img.src_full"/>
</div>
</div>
</ion-content>
foto.ts
options = {
quality: 50,
destinationType: this.camera.DestinationType.DATA_URL,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
allowEdit: true,
targetWidth: 1000,
targetHeight: 1000,
correctOrientation: true
}
}
this.camera.getPicture(options).then((imageData) => {
setTimeout(()=>{
this.base64Image.push({
id: null,
procent: 0,
src_full: 'data:image/jpeg;base64,' + imageData
});
},500);
}, (err) => {
});
Other information:
Ios When adding new photos from the camera, or selecting from a photo album, the <img> tag does not show photos.
On Android shows well.
If you download a picture from the Internet, the <img> tag will show it, but does not show it from the camera.
Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):
Cordova CLI: 7.0.1
Ionic Framework Version: 3.3.0
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.7
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 8
Node Version: v6.10.3
Xcode version: Not installed
_Copied from original issue: ionic-team/ionic#11854_
jgw96
All 6 comments
_From @AmitMY on May 30, 2017 10:15_
I think it will be better if you open this issue with ionic-native, as it is the camera plugin that is problematic.
I just tested in my app, in which I have something like yours, on iOS, but only with sourceType, destinationType, and encodingType set (exactly the same values as yours), and it does show that image.
So I recommend to also try remove all of the other properties just for a test, perhaps one of your properties is causing it on iOS.
jgw96
on 30 May 2017
Did so:
options = {
destinationType: this.camera.DestinationType.DATA_URL,
sourceType: this.camera.PictureSourceType.CAMERA,
encodingType: this.camera.EncodingType.JPEG,
}
no work, &:
var options = {
destinationType: this.camera.DestinationType.DATA_URL,
sourceType: this.camera.PictureSourceType.CAMERA,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
}
no work, but its work the:
addFotoGoGo(){
this.base64Image.push({
src_full: "data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQ......",
id: null,
procent: 0
});
}
Previously, everything worked well, did an update and after that does not work. A photo camera opens, I take a photo, but does not show anything in the <img>, but on the android works
{
"name": "Test",
"version": "0.0.0",
"author": "testov",
"homepage": "http://test.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"@angular/common": "4.1.2",
"@angular/compiler": "4.1.2",
"@angular/compiler-cli": "4.1.2",
"@angular/core": "4.1.2",
"@angular/forms": "4.1.2",
"@angular/http": "4.1.2",
"@angular/platform-browser": "4.1.2",
"@angular/platform-browser-dynamic": "4.1.2",
"@ionic-native/action-sheet": "3.10.2",
"@ionic-native/background-mode": "3.10.2",
"@ionic-native/call-number": "3.10.2",
"@ionic-native/camera": "3.10.2",
"@ionic-native/core": "3.10.2",
"@ionic-native/date-picker": "3.10.2",
"@ionic-native/dialogs": "3.10.2",
"@ionic-native/email-composer": "3.10.2",
"@ionic-native/file": "3.10.2",
"@ionic-native/geolocation": "3.10.2",
"@ionic-native/google-maps": "^3.10.3",
"@ionic-native/in-app-browser": "3.10.2",
"@ionic-native/keyboard": "3.10.2",
"@ionic-native/launch-navigator": "^3.10.3",
"@ionic-native/media": "^3.10.2",
"@ionic-native/native-audio": "3.10.2",
"@ionic-native/photo-viewer": "3.10.2",
"@ionic-native/push": "3.10.2",
"@ionic-native/spinner-dialog": "3.10.2",
"@ionic-native/splash-screen": "3.10.2",
"@ionic-native/sqlite": "3.10.2",
"@ionic-native/status-bar": "3.10.2",
"@ionic-native/toast": "3.10.2",
"@ionic-native/transfer": "3.10.2",
"@ionic-native/vibration": "3.10.2",
"@ionic/storage": "2.0.1",
"cordova-android": "^6.2.3",
"cordova-ios": "4.4.0",
"cordova-plugin-actionsheet": "~2.3.3",
"cordova-plugin-calendar": "~4.5.5",
"cordova-plugin-camera": "2.4.1",
"cordova-plugin-console": "~1.0.5",
"cordova-plugin-crosswalk-webview": "~2.2.0",
"cordova-plugin-datepicker": "~0.9.3",
"cordova-plugin-device": "~1.1.4",
"cordova-plugin-dialogs": "~1.3.2",
"cordova-plugin-file": "~4.3.2",
"cordova-plugin-file-transfer": "~1.6.2",
"cordova-plugin-geolocation": "^2.4.3",
"cordova-plugin-googlemaps": "^1.4.0",
"cordova-plugin-media": "^3.0.1",
"cordova-plugin-nativeaudio": "~3.0.8",
"cordova-plugin-spinner-dialog": "~1.3.1",
"cordova-plugin-splashscreen": "~4.0.2",
"cordova-plugin-statusbar": "~2.2.2",
"cordova-plugin-vibration": "~2.1.4",
"cordova-plugin-whitelist": "~1.3.1",
"cordova-plugin-wkwebview-engine": "https://github.com/driftyco/cordova-plugin-wkwebview-engine.git#keyboard-fixes",
"cordova-plugin-x-toast": "~2.5.2",
"cordova-sqlite-storage": "~2.0.2",
"ionic-angular": "3.3.0",
"ionic-plugin-keyboard": "~2.2.1",
"ionicons": "3.0.0",
"ng2-translate": "^5.0.0",
"phonegap-plugin-push": "^1.10.4",
"rxjs": "5.1.1",
"sw-toolbox": "3.4.0",
"uk.co.workingedge.phonegap.plugin.launchnavigator": "^3.2.2",
"zone.js": "0.8.11"
},
"devDependencies": {
"@ionic/app-scripts": "1.3.7",
"typescript": "2.3.3"
},
"cordovaPlugins": [
"com-sarriaroman-photoviewer",
"call-number",
"cordova-plugin-email",
"cordova-plugin-inappbrowser",
"cordova-plugin-whitelist",
"cordova-plugin-nativeaudio",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard",
{
"locator": "https://github.com/driftyco/cordova-plugin-wkwebview-engine.git#keyboard-fixes",
"id": "cordova-plugin-wkwebview-engine"
},
"cordova-plugin-dialogs",
"cordova-sqlite-storage",
"cordova-plugin-x-toast",
"cordova-plugin-geolocation",
"cordova-plugin-spinner-dialog",
"cordova-plugin-file-transfer",
"cordova-plugin-actionsheet",
"[email protected]",
"cordova-plugin-camera",
"cordova-plugin-datepicker",
"cordova-plugin-file",
"cordova-plugin-vibration",
"cordova-plugin-media",
{
"variables": {
"SENDER_ID": "1:7XXXXXXXXX4:android:1a4XXXXXXXXX53c"
},
"locator": "phonegap-plugin-push"
},
"cordova-plugin-crosswalk-webview"
],
"cordovaPlatforms": [],
"description": "Test",
"cordova": {
"platforms": [
"android",
"ios"
],
"plugins": {
"cordova-plugin-camera": {
"CAMERA_USAGE_DESCRIPTION": "This app uses the camera.",
"PHOTOLIBRARY_USAGE_DESCRIPTION": "This app uses the PHOTO."
},
"cordova-plugin-actionsheet": {},
"cordova-plugin-calendar": {},
"cordova-plugin-console": {},
"cordova-plugin-crosswalk-webview": {
"XWALK_VERSION": "22+",
"XWALK_LITEVERSION": "xwalk_core_library_canary:17+",
"XWALK_COMMANDLINE": "--disable-pull-to-refresh-effect",
"XWALK_MODE": "embedded",
"XWALK_MULTIPLEAPK": "true"
},
"cordova-plugin-datepicker": {},
"cordova-plugin-device": {},
"cordova-plugin-dialogs": {},
"cordova-plugin-file": {},
"cordova-plugin-file-transfer": {},
"cordova-plugin-nativeaudio": {},
"cordova-plugin-spinner-dialog": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-vibration": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-wkwebview-engine": {},
"cordova-plugin-x-toast": {},
"cordova-sqlite-storage": {},
"ionic-plugin-keyboard": {},
"cordova-plugin-media": {},
"cordova-plugin-googlemaps": {
"API_KEY_FOR_ANDROID": "AIzaSyCXXXXXXXXXXXXXXXXXXXXXXXpcfKeEY",
"API_KEY_FOR_IOS": "AIzaSyCpHKXXXXXXXXXXXXXXXXXXXXXXXX8GNTkM"
},
"cordova-plugin-geolocation": {},
"uk.co.workingedge.phonegap.plugin.launchnavigator": {},
"phonegap-plugin-push": {
"SENDER_ID": "1:7XXXXXXXXX4:android:1a4XXXXXXXXX53c"
}
}
}
}
aspidvip
on 31 May 2017
But if you save via the transfer plugin, and transfer to the server, then the image is then loaded normally!
aspidvip
on 31 May 2017
foto.html
<ion-content>
<div *ngFor="let img of base64Image">
---------------------------------------------------------------
<label style="font-size: 0.5em;">{{img.src_full}}</label>
<p></p>
---------------------------------------------------------------
</div>
</ion-content>
result:
aspidvip
on 31 May 2017
I figured out what's wrong. At some point, the image was locked and I had to do so:
foto.html
<div *ngIf="base64Image.length>0">
<ion-slides pager="true">
<ion-slide *ngFor="let img of base64Image">
<img (press)="DelFoto(img)" style="width:100%; height: auto; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 5px 0 rgba(0, 0, 0, 0.19);" [src]="_DomSanitizer.bypassSecurityTrustUrl(img.src_full)"/>
</ion-slide>
</ion-slides>
</div>
foto.ts
..........................
.......................
......................
import {DomSanitizer} from '@angular/platform-browser';
constructor(
//add DomSanitizer
public _DomSanitizer: DomSanitizer,
)
...........................................
.........................................
And now everything works.
But before this was not. Most likely there have been some changes in the security
aspidvip
on 1 Jun 2017
The problem is solved you can close this topic)))
aspidvip
on 1 Jun 2017
Related issues
shaliko
路
3Comments
goleary
路
3Comments
ghost
路
3Comments
rajanshahsa
路
3Comments
hobbydevs
路
3Comments
Most helpful comment
The problem is solved you can close this topic)))