I am developing an application in ionic v4 in which I need to upload profile picture from the gallery. So for that I am using #ionic-native/camera plugin and below is my code:
const options: CameraOptions = {
targetWidth: 800,
targetHeight: 600,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.PNG,
mediaType: this.camera.MediaType.PICTURE,
correctOrientation: true,
sourceType: sourceType,
}
this.camera.getPicture(options).then((imageData) => {
console.log(imageData);
})
The problem statement is that when I select image even the size of 1mb then also the screen is taking time to render the image and so that time screen is blank and even spinner/loader is also not visible.
I need to place a loader while the image is being processed.
Related
I have set the Capacitor camera plugin with the following options
const image = await Camera.getPhoto({
quality: 20,
width : 200,
height : 200,
allowEditing: false,
source: CameraSource.Camera,
resultType: CameraResultType.Base64
});
After that I take the base64 and upload it to the server. However I am getting images in the 2-5MB range of size (Android). Is there any way of reducing/compressing the size further?
Already checked this and other similar postings but they seem to adjust the size by reducing the quality param and the width and height (which are already low in my case)
I have tried to increase the quality and resolution of the CanvasRecorder in HTML Element Recording using RecordRTC but it doesn't change. I need the highest video quality to record CSS animations inside an HTML element. Did I miss something?
Update: I have tried to increase the dpi/scale in html2canvas library by adding {scale: 2} as well but the video is still blurry.
Updated code:
https://jsfiddle.net/ztgqbu6x/
var options = {
type: 'canvas', // Mandatory STRING
video: {
width: 1920,
height: 1280
},
canvas: {
width: 1920,
height: 1280
},
timeSlice: 10,
// used by CanvasRecorder and WhammyRecorder
// it is kind of a "frameRate"
frameInterval: 90,
// used by CanvasRecorder and WhammyRecorder
// you can pass {width:640, height: 480} as well
//video: HTMLVideoElement,
// used by WebAssemblyRecorder
frameRate: 90,
// used by WebAssemblyRecorder
bitrate: 128000
};
var recorder = new RecordRTC(canvas2d, options);
My problem is to how make the white background of a-frame transparent that we just can see whatever we see from the iPhone camera plus the 3D-model.
I have been trying to make AR (Augmented Reality) working in Ionic iOS version. I realised that a-frame can not trigger webcam for some reasons in iOS. So one of the workaround came to my mind is to load 3D model by a-frame and and trigger the camera at the same time. This some how works, in 2/3 of the screen we can see the camera input and 1/3 the model is loaded with white background. If I can transparent the background of the model then at I would be very happy. Is there any way to make the background of the model transparent in Ionic? is there any other workaround for this problem?
what I have in home.page.html is simply:
`
Ionic Blank
<ion-content>
<a-scene *ngIf="iosReady"
renderer="alpha: true;
colorManagement: true;
sortObjects: true;
physicallyCorrectLights: true;
maxCanvasWidth: 1920;
maxCanvasHeight: 1920;">
<a-gltf-model position="1 1 -4"
src="/assets/models/LibertStatue.gltf" ></a-gltf-model>
</a-scene>
</ion-content>`
And in home.page.ts I have:
const cameraPreviewOpts: CameraPreviewOptions = {
x: 0,
y: 0,
width: window.screen.width,
height: window.screen.height,
camera: 'rear',
tapPhoto: true,
previewDrag: true,
toBack: true,
alpha: 1
}
CameraPreview.startCamera(cameraPreviewOpts).then(
(res) => {
console.log(res);
},
(err) => {
console.log(err);
});
});
I am taking pic from camera and uploading to server , then returning the url of picture from server.But previous picture is still there.Image is not updating.
You have to create a variable in TYPESCRIPT something like :
path:String = "";
then the function to take a photo
takePicture(){
Camera.getPicture({
destinationType: Camera.DestinationType.DATA_URL,
targetWidth: xxx,
targetHeight: yyy
}).then((imageData) => {
// imageData is a base64 encoded string,
this.path = "data:image/jpeg;base64," + imageData;
//create a function here to send the photo and the return will be the link
this.path = getServerLink();
}, (err) => {
console.log(err);
});
}
then in HTML
<img src="{{path}}"/>
<!--or -->
<img [src]="path" *ngIf="path" />
I have two buttons, the first one for browse image from gallery and the second one for taking photo. I'm using cordova camera plugin for two cases.
After choosing an image, I want to crop it before to send to server using cordova file transfer plugin. I've tried to use several plugins such as jr-crop, angular-image-crop, ngImgCrop. The problem is that plugins returns a base64 image, but I want to get the image url (not dataUrl). Any help please !
My solution (#egycode) :
$scope.image_gallery = function() {
var options = {
quality: 100,
correctOrientation: true,
sourceType: 0
};
$cordovaCamera.getPicture(options).then(function(data) {
console.log(data);
$scope.crop(data);
console.log('camera data image_gallery: ' + angular.toJson(data));
}, function(error) {
console.log('camera error image_gallery: ' + angular.toJson(error));
});
}
$scope.crop = function(url) {
$jrCrop.crop({
url: url,
width: 261,
height: 362
}).then(function(canvas) {
console.log(canvas);
var image = canvas.toDataURL();
//var image is the result, you can show it using : $scope.pictureUrl = image;
}, function() {
// User canceled or couldn't load image.
});
}