I have some WEBP animed images, and I need to crop it with imagine filter
I added the animated option but the image is not animated
liip_imagine:
driver: "imagick"
filter_sets:
webp_animated:
animated: true
filters:
thumbnail:
size: [ 500, 500 ]
I've try with this exemple : https://mathiasbynens.be/demo/animated-webp
Related
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.
I have a loto of images organized in a tree of different directories, and I would need to process and convert them with Gulp recursively, saving them in each subdirectory.
Let me clarify with an example
source-dir
source-subdir01
source-subdir02
source-subdir03
The jpg images are in the 3 source-subdir; I would need to process them recursively, and save the new rescaled and converted jpg+webp in these 3 new dir <small*>
target-dir
target-subdir01
small01
target-subdir02
small02
target-subdir03
small03
If this way is not possible, I would like to store them in the 3 dir <target-subdir*>
Actually I built this little script that works with one directory, and I would like to make it recursive so that I can set "source-dir" as source and process all the subdirectories at the same time.
gulp.task('rescale', function () {
return gulp
.src('source/*.{jpg}')
.pipe(
responsive(
{
// Resize in jpg + webp
'*.jpg': [
{
width: 150,
},
{
width: 300,
},
{
width: 150,
format: 'webp',
quality: 70,
},
{
width: 300,
format: 'webp',
quality: 70,
}
]
},
{
// Global configuration for all images
// The output quality for JPEG, WebP and TIFF output formats
quality: 80,
// Use progressive (interlace) scan for JPEG and PNG output
//progressive: true,
// Strip all metadata
withMetadata: false
}
)
)
.pipe(gulp.dest('target'))
})
Kind regards,
Matt
I want to slice image on source code directly like the method to slice image on xcassets like the below picture.
I already figured out the way on google but I couldn't fine that.
If you know how that, please inform of me about that? Thank you!
When you change an image's Slicing through storyboard, it actually applies changes to Contents.json file corresponding the image.
Applying the changes you've made in the attached image, the following changes are applied to the file:
"resizing" : {
"mode" : "9-part",
"center" : {
"mode" : "tile",
"width" : 1,
"height" : 1
},
"cap-insets" : {
"bottom" : 27,
"top" : 26,
"right" : 21,
"left" : 21
}
}
You can apply the same changes programmatically by making use of the UIImage method resizableImage:
Declaration:
func resizableImage(withCapInsets capInsets: UIEdgeInsets,
resizingMode: UIImage.ResizingMode) -> UIImage
Usage Example:
let image = UIImage(named: "example.png")
let insets = UIEdgeInsets(top: 1, left: 2, bottom: 1, right: 2)
let imageWithInsets = image.resizableImage(withCapInsets: insets, resizingMode: .tile)
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
I have a retina image of 500x500 pixels but it has to be displayed as 250x250 on map.
If i scale the image the quality is reduced.
Is there a way we can display retina images on the openlayers 3 map.
I use this style to display images
var style = new ol.style.Style({
image: new ol.style.Icon(({
src: imagesource,
})),
});