I'm working on an image cropping tool based on cropper-js (made by fengyuanchen).
After testing with several images, every time i crop the image and resize it to small size (120x180), the result is an image with pixelated effect.
As far as I know, when resizing an image this effect could occurs as you are losing information, however when using other tools like MS Paint pixelation effect is smoother.
Actual Image
Link image
Crop and resized Image
Link image
Crop and resized Image with Paint tool
Link image
Piece of code of cropper
const imageElement = element.get(0);
element.on('load', () => {
const cropper = new Cropper(imageElement, {
responsive: true,
aspectRatio: 2/3,
guides: false,
zoomable: true,
zoomOnTouch: false,
zoomOnWheel: false,
movable: true,
toggleDragModeOnDblclick: false,
scalable: false,
cropBoxResizable: true,
autoCrop: true,
autoCropArea: 1,
minCropBoxHeight: 180,
minCropBoxWidth: 120,
viewMode: 1,
ready() {
scope.registerCropperInstance && scope.registerCropperInstance(cropper);
}
});
});
Piece of code for saving
const { height = 180, width = 120, mimeType = 'image/jpeg', quality = 1, imageSmoothingEnabled = false, imageSmoothingQuality = 'high' } = opts;
const cropperCanvas = cropperInstance.getCroppedCanvas({ height, width, imageSmoothingEnabled, imageSmoothingQuality });
return new Promise(function (resolve) {
cropperCanvas.toBlob(function (imgBlob) {
resolve(imgBlob);
}, mimeType, quality);
});
Is anything we could improve ? Thanks in advance.
Related
Highchart, How to resize auto if there is a lot of data, then scale accordingly to make all the data visible.
Link demo
The problem is that Football-Player there is so much information that the charts can't show them all. I want to show all data no size and height restrictions. just show all the data.
You can adapt your chart's height to the number of points. Below you can find a simple implementation of such feature:
let spacePerPoint;
let allowChartRedraw = true;
Highcharts.chart('container', {
chart: {
type: 'bar',
width: 600,
height: 600,
events: {
load() {
spacePerPoint = this.plotSizeX / this.series[0].points.length;
if (this.renderer.forExport) {
Highcharts.drawTable(this);
}
},
redraw() {
if (allowChartRedraw) {
allowChartRedraw = false;
this.setSize(
null,
this.chartHeight - this.plotSizeX + this.series[0].points.length * spacePerPoint
);
allowChartRedraw = true;
}
}
}
},
...
});
Live demo: https://jsfiddle.net/BlackLabel/cy7gd0ab/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#setSize
I'm using html2pdf that creates pdf from html code. It uses html2canvas and jsPDF. The result is very good but slightly different from the original: the font-size and line-height are a little bit different so that the end of the page is not correct. I really need a copy if the div (that has fixed aspect to be correctly rendered on A4 pages).
Is there a way to influence the fonts in the final rendering? The way I produce pdf now is:
savePdf () {
this.pdfDialog = true
let opt = {
// if set firefox will not be able to print as pdf!...
// margin: 0,
filename: 'cv.pdf',
enableLinks: true,
image: { type: 'jpeg', quality: 0.98 },
html2canvas: {
scale: 8,
useCORS: true,
width: 310,
letterRendering: true,
},
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
}
html2pdf().set(opt).from(document.getElementById('printable-cv')).save()]
},
The solution is to add inline styles to the elements. In my case, working in vuejs I ended up with this code:
<div class="presentazione" v-html="presentation" :style="presentationFont"></div>
I have spend hours on this and I got no where.
Here is the best combination I have got to.
https://jsfiddle.net/zardaloop/bztoju90/21/
However I can't understand why it is not printing correctly.
Does anyone know what I am doing wrong or knows any good solution to this?
window.takeScreenShot = function() {
html2canvas(document.getElementById("calendar"), {
onrendered: function (canvas) {
var doc = new jsPDF({ orientation: 'portrait',format: 'a4' });
var imgData = canvas.toDataURL("image/jpeg");
doc.addImage(imgData, 'JPEG', 0, 0, canvas.width, canvas.height);
doc.save("Print");
},
width:800,
height:600
});
}
Adding the background color to the generated image is enabling the printed pdf with readable content, Still figuring out the rest of the size issue which persists even after changing the orientation: 'landscape'
\\html2canvas(document.getElementById("calendar"), {
background: '#FFFFFF', \\Added option
\\ onrendered: function (canvas) {
Update:
Modifying the format and orientation is the way I see to debug this.
Please keep on trying with the same, for now the below line of code serves your purpose pretty well I believe.
var doc = new jsPDF({ orientation: 'landscape',format: 'a2' });
I'm trying to translate an image of dynamic height and fixed width to an absolute position on a google slide, maintaining a 1:1 aspect ratio.
For example, my original images could be (in pixels):
200x150
or
200x220
I want to move it so they are both offset by x: 100, y:200, keep the original aspect ratio, and make sure the width is always fixed to the same size in PX but height is variable.
I am struggling to calculate the correct transform to make the correct translation.
{
'createImage': {
objectId,
url,
elementProperties: {
pageObjectId,
size: {
width: {
magnitude: (7/9)*originalWidthPx, //pixel to PT conversion
unit: 'PT',
},
height: {
magnitude: (7/9)*originalHeightPx, //pixel to PT conversion
unit: 'PT',
},
},
transform: {
scaleX: 1, // I believe i'll need to scale the image based on Height, keeping the original aspect ratio
scaleY: 1,
translateX: 100, // i dont believe this needs to be dynamic based on w/h
translateY: 200,
unit: 'PT',
},
},
},
}
I'm using Angular UI Grid and I've tried to few ways to add an image (logo) to the top of the PDF document which gets exported.
I've had no luck with the implementations I've tried...
exporterPdfHeader: { text: "My Header", image: "<urlOfImage>" }
exporterPdfHeader: { text: "My Header", backgroundImage: "<urlOfImage>" }
exporterPdfHeader: { text: "My Header", backgroundImage: url("<urlOfImage>") }
Is this even possible to do?
Thanks in advance.
Can you add your image inside a custom html header using headerTemplate: 'header-template.html', in grid-options?
See example ui-grid tutorial
edit
OK, having looked at the source and docs for the export, there is nothing there about passing images in the header.
It does refer you to pdfMake
Images
This is simple. Just use the { image: '...' } node type.
JPEG and PNG formats are supported.
var docDefinition = {
content: [
{ // you'll most often use dataURI images on the browser side // if no width/height/fit is provided, the original size will be used image: 'data:image/jpeg;base64,...encodedContent...' },
{ // if you specify width, image will scale proportionally image: 'data:image/jpeg;base64,...encodedContent...', width: 150 },
{ // if you specify both width and height - image will be stretched image: 'data:image/jpeg;base64,...encodedContent...', width: 150, height: 150 },
{ // you can also fit the image inside a rectangle image: 'data:image/jpeg;base64,...encodedContent...', fit: [100, 100] },
{ // if you reuse the same image in multiple nodes, // you should put it to to images dictionary and reference it by name image: 'mySuperImage' },
{ // under NodeJS (or in case you use virtual file system provided by pdfmake) // you can also pass file names here image: 'myImageDictionary/image1.jpg' } ],
images: {
mySuperImage: 'data:image/jpeg;base64,...content...' } }
end of quote
So it looks like you were close.
Can you try a relative path from the root of your website wrapped in single quotes.
Had to write a custom export function to add page margins.
Plnkr
$scope.export = function() {
var exportColumnHeaders = uiGridExporterService.getColumnHeaders($scope.gridApi.grid, uiGridExporterConstants.ALL);
var exportData = uiGridExporterService.getData($scope.gridApi.grid, uiGridExporterConstants.ALL, uiGridExporterConstants.ALL, true);
var docDefinition = uiGridExporterService.prepareAsPdf($scope.gridApi.grid, exportColumnHeaders, exportData);
docDefinition.pageMargins = [40, 80, 40, 60];
if (uiGridExporterService.isIE() || navigator.appVersion.indexOf("Edge") !== -1) {
uiGridExporterService.downloadPDF($scope.gridOptions.exporterPdfFilename, docDefinition);
} else {
pdfMake.createPdf(docDefinition).open();
}
}
Image has to be provided as base 64 encoded, unless using Node.js (as per pdfmake library).
Otherwise, you may need to use a JavaScript function to download and convert an image to base 64.
References:
https://stackoverflow.com/a/37058202/2808230
pdfExport function in http://ui-grid.info/release/ui-grid.js
Found this as I was writing up this answer: Angular UI Grid - Exporting an image to a pdf