i want to select image from gallery ,crop it and save cropped image to gallery as a file.
i used camera native but i can't save it to my gallery again
const options: CameraOptions = {
quality: 100,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
//allowEdit: true
}
this.camera.getPicture(options).then((imageData) => {
this.base64Image = "data:image/JPEG;base64,"+imageData;
//this.path =this.base64Image.toDataURL;
console.log("path ",this.base64Image);
//resolve(this.base64Image);
}, (err) => {
console.log("error",err)
});
You need to save the file yourself using cordova-plugin-file. Here is some instruction on how to do so:
https://ourcodeworld.com/articles/read/150/how-to-create-an-image-file-from-a-base64-string-on-the-device-with-cordova
Related
I am having trouble creating a PDF at the same time and then sending the same file via e-mail.
I tried to use apex_util.get_print_document but I don't know what to enter in p_report_query_name and p_report_layout parameters.
I also tried to use html2pdf but I don't know how to send the created pdf to the e-mail attachment.
Please help
js:
function pdf_DLoad (p_id) {
var element = document.getElementById(p_id);
var opt = {
margin: 1,
filename: 'myfile.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait'
}
};
html2pdf().set(opt).from(element).outputPdf('datauristring')
.then(function (res)
{
this.blobString = res;
console.log(res);
apex.item("P10_NEW").setValue(res);
});
I read all docs I could and searched all over the internet attempting to achieve the following (attached image) on ChartJS 3.9.1. Is it even possible to have each axis on a radar chart labeled on ChartJS?
radar chart
I had the same problem as you and found this solution:
Define the array of base64 images you want as labels
const labelImages = [
/* Image 2 */ 'data:image/png;base64,iVBORw0KGg......',
/* Image 1 */ 'data:image/png;base64,iVBORw0KGgoAA.....'
]
Then use the plugin:
plugins: [
{
id: 'Label images',
afterDraw: (chart) => {
for (const i in chart.scales.r._pointLabelItems) {
const point = chart.scales.r._pointLabelItems[i];
var image = new Image();
image.src = labelImages[i];
// you I had 20x20 images thats why I use 20x20
chart.ctx.drawImage(image, point.x - 10, point.y, 20, 20);
}
}
}
]
Draw image from context options
This solution draws images where the labels are (where they start, i think), if you want only images and no text then you should hide the labels. I did it like this:
options: {
// just so that the images are not outside the canvas
layout: {
padding: 20
},
scales: {
y: {
display: false
},
x: {
display: false
},
r: {
pointLabels: {
// Hides the labels around the radar chart but leaves them in the tooltip
callback: function (label, index) {
return ' ';
}
}
}
}
}
I hope this helps
I use croppie to upload images in my laravel application. The upload part works flawlessly. However, since the PNG image takes more space than the original images. I want to have jpeg images stored on the server instead of PNG and with my own quality parameters provided.
Here is the javascript code I use for uploading images using croppie.
but save image with PNG format
$(function() {
var croppie = null;
var el = document.getElementById('resizer');
$.base64ImageToBlob = function(str) {
// extract content type and base64 payload from original string
var pos = str.indexOf(';base64,');
var type = str.substring(5, pos);
var b64 = str.substr(pos + 8);
// decode base64
var imageContent = atob(b64);
// create an ArrayBuffer and a view (as unsigned 8-bit)
var buffer = new ArrayBuffer(imageContent.length);
var view = new Uint8Array(buffer);
// fill the view, using the decoded base64
for (var n = 0; n < imageContent.length; n++) {
view[n] = imageContent.charCodeAt(n);
}
// convert ArrayBuffer to Blob
var blob = new Blob([buffer], { type: type });
return blob;
}
$.getImage = function(input, croppie) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
croppie.bind({
url: e.target.result,
});
}
reader.readAsDataURL(input.files[0]);
}
}
$("#file-upload").on("change", function(event) {
$("#myModal").modal();
// Initailize croppie instance and assign it to global variable
croppie = new Croppie(el, {
viewport: {
width: 200,
height: 200,
type: 'circle'
},
boundary: {
width: 250,
height: 250
},
enableOrientation: true
});
$.getImage(event.target, croppie);
});
$("#upload").on("click", function() {
croppie.result('base64','original','jpeg',0).then(function(base64) {
$("#myModal").modal("hide");
$("#profile-pic").attr("src","/images/ajax-loader.gif");
var url = "{{ url('/demos/jquery-image-upload') }}";
var formData = new FormData();
formData.append("profile_picture", $.base64ImageToBlob(base64));
// This step is only needed if you are using Laravel
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: 'POST',
url: url,
data: formData,
processData: false,
contentType: false,
success: function(data) {
if (data == "uploaded") {
$("#profile-pic").attr("src", base64);
} else {
$("#profile-pic").attr("src","/images/icon-cam.png");
console.log(data['profile_picture']);
}
},
error: function(error) {
console.log(error);
$("#profile-pic").attr("src","/images/icon-cam.png");
}
});
});
});
// To Rotate Image Left or Right
$(".rotate").on("click", function() {
croppie.rotate(parseInt($(this).data('deg')));
});
$('#myModal').on('hidden.bs.modal', function (e) {
// This function will call immediately after model close
// To ensure that old croppie instance is destroyed on every model close
setTimeout(function() { croppie.destroy(); }, 100);
})
});
I faced similar issues a while ago.
I am using the jQuery way as per the docs. The OP is also using jQuery elsewhere, so...
Croppie is attached this way:
upload = $('#upload_div').croppie(method, args);
Instead of passing the parameters like this:
croppie.result('base64','original','jpeg',0).then(function(base64){...
You pass named parameters:
upload.croppie(
'result',
{type: 'base64',
size: 'original',
format: 'jpeg',
quality: 0
}).then(function(base64){ ...
Use:
croppie.result({
type: 'base64',
format: 'jpeg',
viewport:'original',
quality:1,
circle: false
}).then(function (base64) {
...
I'm trying to load a mp4 video stream from Django to Vue.js. I followed the solution here and got a byte string via my axios API which I concatenated to data:video/mp4;base64,, and then binded it to the video tag's :src property, but the video is not displaying. Is this the correct way to stream videos from Django 3 to Vue.js? What am I doing wrong?
Api.js code snippet:
import axios from 'axios'
export default () => {
return axios.create({
baseURL: `http://127.0.0.1:8000/`,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
}
})
}
Video.vue component code snippet:
methods: {
async stream() {
return await VideoService.stream(this.video)
.then(function(data) {
return data.data;
});
}
},
props: ['data'],
watch: {
data: {
deep: true,
immediate: true,
handler(curr, prev) {
this.video = curr;
this.stream().then(data => {
data = Buffer.from(data, 'binary').toString('base64');
this.video = 'data:video/mp4;base64,'+data;
});
}
}
}
As suggested in the comments of that answer, I also set src to the Django api endpoint e.g. src="/video/test.mp4, but I can see in my terminal that it's not reaching that Django route. How do I get the linked solution to work with Vue.js?
Picture of the raw string I get back from Kevin's Django view:
Another image when I convert to base 64 using Buffer:
The final solution needed to stream videos to Vue.js if you're using the same component for videos is to set the src tag using v-html so that you can set src dynamically. Directly doing src="http://localhost:8000/v/video.mp4" won't work once the component is created. So in addition to Kevin's code, just do the following in the video component:
<template>
<div>
<video v-html="src" autoplay="" controls="" loop="" muted="" frameborder="0">
Your browser does not support HTML videos.
</video>
</div>
</template>
<script>
export default {
data() {
return {
src: ''
}
},
props: ['data'],
watch: {
data: {
deep: true,
immediate: true,
handler(curr, prev) {
this.src = '<source src="http://localhost:8000/v/"'+curr+' type="video/mp4">'
}
}
}
}
</script>
<style scoped>
</style>
I am actually implementing a function to allow user to upload the photos from phone.
Is there any image compress plugin / library to recommended?
Notes: it is image compression, not image resizing.
Thanks a lot
Use the Ionic Native Camera function
There is a quality option ranging from 0-100. It will return a compressed image
const options: CameraOptions = {
quality: 50, // Try changing this
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options).then((imageData) => {
let base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
});
Try following CameraOptions with ionic camera plugin.
const options: CameraOptions = {
quality: 20,
targetWidth: 600,
targetHeight: 600,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.PNG,
mediaType: this.camera.MediaType.PICTURE,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
allowEdit: true //may not work with some deices
}
It is targetHeight and targetWidth doing the magic. :)
Answer referred from : Ionic image compress