How can I validate image properties(heigth, width) in Kohana 3 before resize?
Or how can I use image resizing only if my image do not less size what I need?
What I want to do:
during avatar uploading I must resize image if it bigger that i want.
Or take action to prohibit uploading bigger avatar.
Now I have this rules:
public function avatar_validate($files)
{
return Validate::factory($files)
->rules('avatar', array(
'Upload::valid' => NULL,
'Upload::type' => array(array('jpg','png','gif','bmp','gif')),
'Upload::size' => array('3M')
)
);
}
After validation (type, filesize, etc) load an image in your controller with Image module.
$image = new Image($file['tmp_name']);
if ($image->width > 800 OR $image->height > 600)
{
$image->resize(800, 600, null);
$image->save('path/'.$file['name']);
}
else
{
move_uploaded_file($file['tmp_name'], 'path/'.$file['name']);
}
Related
I'm currently working on creating pdf files with jspdf and the AutoTable plugin.
My plan is to create a table like this:
I have the images as local urls, and I'm trying to add them to the pdf using the new Image and adding them as .src to the image.
When I directly run the jspdf.addImage function with the image, the images display correctly.
But I'm struggling to get the correct scaling to work. So I wanted to use the width and height properties from the image, but for this to work you need to wait for the image to load.
I tried to use the onload function, but it stops rendering the table in general, because it skips over the function and continues with the next table before the images load.
If you have any suggestions of how to get something like this to work it would be greatly appreciated. The images all have variable resolution and need to be scaled down to properly fit in the table. I'll paste my working code (but without the height and width scaling) below.
doc.autoTable({
head: [{comments: 'Photos'}],
body: body,
styles: {
lineColor: [0, 0, 0],
lineWidth: 0.4,
},
headStyles: {
fillColor: [191, 191, 191],
textColor: [0, 0, 0],
},
didDrawCell: function (data) {
if (data.section === 'body') {
console.log(data);
const image = new Image();
// image.onload = function() {
// console.log(this);
// const width = this.width;
// const height = this.height;
// console.log({width, height})
// doc.addImage(
// this,
// 'JPEG',
// data.cell.x + 5,
// data.cell.y + 2,
// )
// }
image.src = QuestionPhotos.link(photosObject[data.cell.raw])
doc.addImage(
image,
'JPEG',
data.cell.x + 5,
data.cell.y + 2,
)
}
}
The commented out part of this code was my other attempt where I would add the image after it was loaded, but this made the image not appear at all in the pdf.
I have been able to solve most of my question using the following functions:
The scaling I was able to fix by storing the width and height together with my images. I then set my height to be fixed (in my case 80mm) and calculated the width like this: photo.height / photo.width * 80.
I tried the other functions Ihsan mentioned, but without any luck.
The didDrawCell is used for inserting the images after the cell has been drawn. willDrawCell draws the image behind the table. didParseCell will insert the images in the top corner of the page instead of in the table itself.
I also initially used the didParseCell to increase the size of the cells to be the correct size for the images, but later on changed this to adding the style when creating the body of the table.
body.push([{content:'', styles: {minCellHeight: height + 10}}]);
I kept track of the row index to know at what rows to insert the image and so that the sizing is correct.
I have created a child theme based on Storefront Woocommerce 3.3. Without adding support image. 3500 images have been uploaded and only the original size exist
I added support theme in function and tried to create the thumbs via plugin
function iconic_modify_theme_support() {
$theme_support = get_theme_support( 'woocommerce' );
$theme_support = is_array( $theme_support ) ? $theme_support[0] : array();
$theme_support['single_image_width'] = 320;
$theme_support['thumbnail_image_width'] = 150;
$theme_support['gallery_thumbnail_image_width'] = 50;
remove_theme_support( 'woocommerce' );
add_theme_support( 'woocommerce', $theme_support );
}
add_action( 'after_setup_theme', 'iconic_modify_theme_support', 10 );
when I use force thumbnail regenarate for an image produce
in database wp_option
woocommerce_thumbnail_cropping, uncropped,yes
thumbnail_crop,1, yes
100x100, 102x300, 150x150, 300x883 shouldn't 17x150 be created?
the 100x100 have been created because of wordpress (and not woocommerce) setting? is it possible to cancel that?
Front page, archive page, single product and in admin's dashboard products list load (src) the file of full image (for example 700x400) the image will be displayed in lower dimensions ( 150x100 for example) but it will load the big file image.
Server in upload folder doesn't have same image in different sizes ( image.jpg , image150x100.jpg image50x30.jpg )
I dont have anything in function.php about the size of image
in Single product page image is retrieved from woocommerce
do_action( 'woocommerce_before_single_product_summary' );
in Archive product I get the image
if( has_post_thumbnail() ){
the_post_thumbnail( 'shop_catalog', array( 'class' => 'visible_photo scale-with-grid' ) );
} elseif ( wc_placeholder_img_src() ) {
echo wc_placeholder_img( 'shop_catalog' );
}
Is it possible to use gallery_thumbnail in admin's product list ?
In Settings -> Media -> Thumbnail size uncheck "Crop thumbnail to exact dimensions (normally thumbnails are proportional)".
I am currently working on a solution, where I crop an image to a rectangle using jcrop so I can use it as a texture for a 3D cube (in three.js)
AND I can save the cropped area as an image on the server.
The Problem here is, that the cropped image looks not good, it has low quality.
At first I thought it has something to do with the DPI, because it saves in 96 DPI, but some images that I upload do also have 96 dpi and have good quality.
I think it has something to do with jcrop. Do someone know or had any experience with jcrop regarding this issue? Or should I use a different plugin?
Original Image
Cropped Image
why don't you use php resize image system.
i am using it on my website.
Check demo resize wallpaper (check screen shoot) : Happy diwali wallpaper
and original wallpaper (download button as well as below resize option at the page) diwali wallpaper
you ca use
function resize($newWidth, $targetFile, $originalFile) {
$info = getimagesize($originalFile);
$mime = $info['mime'];
switch ($mime) {
case 'image/jpeg':
$image_create_func = 'imagecreatefromjpeg';
$image_save_func = 'imagejpeg';
$new_image_ext = 'jpg';
break;
case 'image/png':
$image_create_func = 'imagecreatefrompng';
$image_save_func = 'imagepng';
$new_image_ext = 'png';
break;
case 'image/gif':
$image_create_func = 'imagecreatefromgif';
$image_save_func = 'imagegif';
$new_image_ext = 'gif';
break;
default:
throw new Exception('Unknown image type.');
}
$img = $image_create_func($originalFile);
list($width, $height) = getimagesize($originalFile);
$newHeight = ($height / $width) * $newWidth;
$tmp = imagecreatetruecolor($newWidth, $newHeight);
imagecopyresampled($tmp, $img, 0, 0, 0, 0, $newWidth, $newHeight, $width, $height);
if (file_exists($targetFile)) {
unlink($targetFile);
}
$image_save_func($tmp, "$targetFile.$new_image_ext");
}
Source: Resize images with PHP, support PNG, JPG
I would like to validate by file dimensions (resolution).
on the documentation page there is only information regarding file name and size, nothing at all in the docs about dimensions, and I also had no luck on Google.
The purpose of this is that I don't want users to upload low-res photos to my server. Thanks.
As Ray Nicholus had suggested, using the getFile method to get the File object and then use that with the internal instance object qq.ImageValidation to run fineuploader's validation on the file. A promise must be return because this proccess is async.
function onSubmit(e, id, filename){
var promise = validateByDimensions(id, [1024, 600]);
return promise;
}
function validateByDimensions(id, dimensionsArr){
var deferred = new $.Deferred(),
file = uploaderElm.fineUploader('getFile', id),
imageValidator = new qq.ImageValidation(file, function(){}),
result = imageValidator.validate({
minWidth : dimensionsArr[0],
minHeight : dimensionsArr[1]
});
result.done(function(status){
if( status )
deferred.reject();
else
deferred.resolve();
});
return deferred.promise();
}
Remained question:
Now I wonder how to show the thumbnail of the image that was rejected, while not uploading it to the server, the UI could mark in a different color as an "invalid image", yet the user could see which images we valid and which weren't...
- Update - (regarding the question above)
While I do not see how I could have the default behavior of a thumbnail added to the uploader, but not being uploaded, but there is a way to generate thumbnail manually, like so:
var img = new Image();
uploaderElm.fineUploader("drawThumbnail", id, img, 200, false);
but then I'll to create an item to be inserted to qq-upload-list myself, and handle it all myself..but still it's not so hard.
Update (get even more control over dimensions validation)
You will have to edit (currently) the qq.ImageValidation function to expose outside the private function getWidthHeight. just change that function deceleration to:
this.getWidthHeight = function(){
Also, it would be even better to change the this.validate function to:
this.validate = function(limits) {
var validationEffort = new qq.Promise();
log("Attempting to validate image.");
if (hasNonZeroLimits(limits)) {
this.getWidthHeight().done(function(dimensions){
var failingLimit = getFailingLimit(limits, dimensions);
if (failingLimit) {
validationEffort.failure({ fail:failingLimit, dimensions:dimensions });
}
else {
validationEffort.success({ dimensions:dimensions });
}
}, validationEffort.success);
}
else {
validationEffort.success();
}
return validationEffort;
};
So you would get the fail reason, as well as the dimensions. always nice to have more control.
Now, we could write the custom validation like this:
function validateFileDimensions(dimensionsLimits){
var deferred = new $.Deferred(),
file = this.holderElm.fineUploader('getFile', id),
imageValidator = new qq.ImageValidation(file, function(){});
imageValidator.getWidthHeight().done(function(dimensions){
var minWidth = dimensions.width > dimensionsLimits.width,
minHeight = dimensions.height > dimensionsLimits.height;
// if min-width or min-height satisfied the limits, then approve the image
if( minWidth || minHeight )
deferred.resolve();
else
deferred.reject();
});
return deferred.promise();
}
This approach gives much more flexibility. For example, you would want to have different validation for portrait images than landscape ones, you could easily identify the image orientation and run your own custom code to do whatever.
here is my problem i have been using ken do-control upload control to upload my images and the real problem is i want to set validation that user should upload image in 35 mm*45 mm.and in ken do upload events i have given a function Events(events => .Select("onImageSelect")and in function function onImageSelect(e) {
if (e.files[0].width == 35||e.files[0].height == 45)
{
return true;
}
but i am getting width and height undefined