uploaded image orientation issues - image

i've been looking for a solution for the whole day but don't seem to be able to find a proper solution.
The problem is (i think) quite simple. When an image is uploaded on my page it is then displayed in an img element. Now for some reason it is rotated by itself from portrait to landscape.
I cut the middle man and connected the img tag to the path.
Problem persists.
If i open it in ps and save it as a new jpeg it is fixed but that is not a viable choice since images will be uploaded directly from clients.
In not other program (ps, paint, photos, photos3d) does that issue exist
In my digging around i found that that is propably caused from the exif data of the image.
Everything else ignores that data, or reads it correctly idk.
Can anyone please tell me how to fix that?
I tried adding image-orientation:0deg and image-orientation:from-image to no result.
Also, just for my sanity's sake, does anyone know WHY this would be a problem?
EDITThis does not happen on firefox. That being said i cannot force everyone to avoid chrome
Thanks in advance

Ok so i looked everywhere and found some ways to rotate the image client side and added css to make it look legit. Then i realized that all that was wasted since it would cause the image to overrotate in browsers that displayed it correctly.
Ended up taking it to server side and fixing it there (rotating based on exif and the removing the exif data)
I will include the controller code
public JsonResult NormalizeOrientation(HttpPostedFileBase file)
{
Image img = Image.FromStream(file.InputStream);
if (Array.IndexOf(img.PropertyIdList, 274) > -1)
{
var orientation = (int)img.GetPropertyItem(274).Value[0];
switch (orientation)
{
case 1:
// No rotation required.
break;
case 2:
img.RotateFlip(RotateFlipType.RotateNoneFlipX);
break;
case 3:
img.RotateFlip(RotateFlipType.Rotate180FlipNone);
break;
case 4:
img.RotateFlip(RotateFlipType.Rotate180FlipX);
break;
case 5:
img.RotateFlip(RotateFlipType.Rotate90FlipX);
break;
case 6:
img.RotateFlip(RotateFlipType.Rotate90FlipNone);
break;
case 7:
img.RotateFlip(RotateFlipType.Rotate270FlipX);
break;
case 8:
img.RotateFlip(RotateFlipType.Rotate270FlipNone);
break;
}
// This EXIF data is now invalid and should be removed.
img.RemovePropertyItem(274);
}
MemoryStream ms = new MemoryStream();
img.Save(ms, ImageFormat.Jpeg);
return Json(new { base64imgage = Convert.ToBase64String(ms.ToArray()) }
, JsonRequestBehavior.AllowGet);
}

Related

Koltin low quality images registerForActivityResult

Hi I'm trying to capture a picture using kotlin and registerForActivityResult but I allways get a blur image with no quality I've read several post but I can't understand how to work with my application. I'm using a fragment to call the camera. Any suggestions? Sorry for my bad english I've spent about the full week trying it works. And nothing. Thanks in advance
private var imagenUri: Uri? =null
val startForResult = registerForActivityResult(ActivityResultContracts.StartActivityForResult()) {
result: ActivityResult ->
if (result.resultCode == Activity.RESULT_OK) {
try {
val intent = result.data
intent!!.putExtra(MediaStore.EXTRA_OUTPUT, imagenUri)
val bitMap = intent?.extras?.get("data") as Bitmap
imagenUri= getImageUriFromBitmap(requireContext(),bitMap)
binding.ivImagen.setImageURI(imagenUri)
Toast.makeText(context, "la uri es: $imagenUri", Toast.LENGTH_SHORT).show()
} catch (e: java.lang.Exception){
Toast.makeText(context, "NO SE HA PODIDO ENCONTRAR IMAGEN", Toast.LENGTH_SHORT).show()}
}
}
binding.ibTomarFoto.setOnClickListener(){
startForResult.launch(Intent(MediaStore.ACTION_IMAGE_CAPTURE))
}
From the documentation:
public static final String ACTION_IMAGE_CAPTURE
Standard Intent action that can be sent to have the camera application capture an image and return it.
The caller may pass an extra EXTRA_OUTPUT to control where this image will be written. If the EXTRA_OUTPUT is not present, then a small sized image is returned as a Bitmap object in the extra field. This is useful for applications that only need a small image. If the EXTRA_OUTPUT is present, then the full-sized image will be written to the Uri value of EXTRA_OUTPUT.
So you need to add the EXTRA_OUTPUT extra to get a full-size image stored at a URI you supply. Otherwise you get a small image as a data payload in the result Intent (those bundles can't handle large objects).
It looks like you're already trying to do that, you've just added it to the wrong place - you need to add it to the Intent you call launch with, not the result one. It's a configuration option for the task you're launching!
So this should work:
binding.ibTomarFoto.setOnClickListener(){
startForResult.launch(
Intent(MediaStore.ACTION_IMAGE_CAPTURE).putExtra(MediaStore.EXTRA_OUTPUT, imagenUri)
)
}
And then remove the same putExtra line from your result-handler code (it doesn't do anything, but there's no point having it there)

Resize image in magento product view

Want to increase the size of an image on the Product view page in Magento 1.8 CE, Modern theme.
I tried to change the values from 265 to 400 in the following files:
/app/design/frontend/default/modern/template/catalog/product/view/media.phtml
/app/design/frontend/base/default/template/catalog/product/view/media.phtml
/app/design/frontend/default/default/template/featurezoom/media.phtml
(because this extension was installed. I have a feeling that the problem might be here, but cannot find what)
/app/design/frontend/base/default/template/productdetails/media.phtml
even in the /app/code/core/Mage/Catalog/Model/Product.php
Changed the
css file .product-view .product-img-box .product-image {width: 400px}
Flushed the cache, cleared the folder /media/catalog/product/cache/
But something still keeps creating the 265x265 folder in the cache
Here is the page
Thought it would be simple task, but already spent the entire day on it.
Any help is appreciated
So I believe I found the solution. Thanks Nikitas for the suggestion to use the debug mode.
Not sure if this is proper way, but this works.
The file I edited was frontend/base/default/template/productdetails/media.phtml
Initial code was
/* Main Image Size */
if (strstr($_productDetails['mainImageSize'], '_')) {
$mainImageSize = explode('_', $_productDetails['mainImageSize'], 2);
} else {
$mainImageSize = array(265, 265);
}
Changing the sizes in the ELSE didn't help, so I changed it in the IF statement like this
/* Main Image Size */
if (strstr($_productDetails['mainImageSize'], '_')) {
/* $mainImageSize = explode('_', $_productDetails['mainImageSize'], 2); */
$mainImageSize = array(400, 400);
} else {
$mainImageSize = array(265, 265);
}
If you know better solution or have any suggestions, that would be helpful.
Thanks
Now I'll have to play with the zoom because it increased the zoom box
Just go to
/app/design/frontend/yourtheme/default/template/catalog/product/view/media.phtml
Find the code
'image')->resize(436)
and just give your image dimension in here like
'image')->resize(300,436)

Visual C++, System Argument Exception in System Drawing (Windows Form)

This error shows up when run the program and try to load an image:
A first chance exception of type 'System.ArgumentException' occurred in System.Drawing.dll
An unhandled exception of type 'System.ArgumentException' occurred in System.Drawing.dll
Additional information: The parameter is invalid.
Here is my code:
Basically, there is a numericUpDown, a button, an openFileDialog and a pictureBox. The user changes the numericUpDown's value, depending on which picture he wants to load (the user doesn't have to open the openFileDialog). For example, if the user chooses "3" as a value for the numericUpDown, the FileName of the openFileDialog will be:
Public:
void Set_FilePath()
{
int n = (int)numericUpDown1->Value;
switch (n)
{
case 1: openFileDialog1->FileName = "C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg"; break;
case 2: openFileDialog1->FileName = "C:\Users\Public\Pictures\Sample Pictures\Desert.jpg"; break;
case 3: openFileDialog1->FileName = "C:\Users\Public\Pictures\Sample Pictures\Hydrangeas.jpg"; break;
case 4: openFileDialog1->FileName = "C:\Users\Public\Pictures\Sample Pictures\Jellyfish.jpg"; break;
case 5: openFileDialog1->FileName = "C:\Users\Public\Pictures\Sample Pictures\Koala.jpg"; break;
case 6: openFileDialog1->FileName = "C:\Users\Public\Pictures\Sample Pictures\Lighthouse.jpg"; break;
case 7: openFileDialog1->FileName = "C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg"; break;
case 8: openFileDialog1->FileName = "C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg"; break;
}
}
private: System::Void button1_Click(System::Object^ sender, System::EventArgs^ e) {
Bitmap^ myImage;
Set_FilePath();
myImage = gcnew Bitmap( openFileDialog1->FileName );
pictureBox1->SizeMode = PictureBoxSizeMode::StretchImage;
pictureBox1->Image = dynamic_cast <Image^> (myImage);
}
My attempt to fix it:
I thought that i didn't copy the directions of the images correctly. So i changed the code to:
if(openFileDialog1->ShowDialog() == System::Windows::Forms::DialogResult::OK)
{
MessageBox::Show(openFileDialog1->FileName);
myImage = gcnew Bitmap( openFileDialog1->FileName );
pictureBox1->SizeMode = PictureBoxSizeMode::StretchImage;
pictureBox1->Image = dynamic_cast <Image^> (myImage);
}
This is working perfectly. Also, a messagebox that shows the filename of openFileDialog is appeared... The directions of the images that are correct... I don't know what is wrong with my program. The problem is that i don't want the openFiledialog to be appeared.
(I am using Visual Studio C++ 2010, the application is made in windows form), Any help would be appreciated.
Thanks..
Exceptions raised by the Image and Bitmap classes are not very informative. You can get an "The parameter is invalid" exception for several reasons. It could be an image file that's corrupted, not that likely in your case since you are using stock Windows image files. It can also be caused by an image that's too large to fit in the available virtual memory address space. You'd like an OutOfMemoryException but GDI+ is goofy about it.
That's the more likely cause, your program is pretty likely to bite the dust like that when you run it for a while. Images can require a lot of unmanaged virtual memory to store their pixel data. And that should be released when you no longer use the image. The garbage collector will do that for you, but it isn't all that quick about it. Certainly an issue with the Bitmap class, it uses very little GC heap so isn't terribly likely to trigger a garbage collection often enough to keep you out of trouble.
Which is why it implements the IDisposable interface. The Dispose() method gets that memory released early. You are not calling it.
You'll need to fix that in your code, like this:
delete picureBox1->Image;
try {
myImage = gcnew Bitmap( openFileDialog1->FileName );
pictureBox1->Image = myImage;
}
catch (Exception^ ex) {
pictureBox1->Image = nullptr;
MessageBox::Show(ex->Message);
}
Note the added delete operator call, that's the one that calls IDisposable::Dispose(). It gets rid of the old image, the one you don't need anymore because you are going to display another image. The try/catch ensures that your program keeps running when the chips are down, dealing with a bad image file or a monster one that just can't fit in available memory. The kind that you deal with by targeting x64 so you get a 64-bit program.

How to display Images in a wxListCtrl (multicolumn report style)

I already managed to create wxListCtrls with either icons or multicolumn text like this
Picture of two wxListCtrls
Now I'd like to add an icon to each line of the text list on the left. I thought this should be possible as typical wxWidgets applications like code::blocks and wxSmith often diplay icons in list/tree views (resource browser window) and even in tabs of notebooks (compiler log window).
So how can I create something like this? (Everybody knows Windows Explorer)
Picture of Explorer Window with icons
I tried this...
SetImageList (ToolImages, wxIMAGE_LIST_NORMAL);
InsertColumn (0, "Icon");
SetColumnWidth (0, 40);
...
for (int i=0; i<5; i++)
{
InsertItem (i, i);
SetItemColumnImage (i, 0, i);
SetItem (i, 1, IntToStr (i+1));
...
But as you can see, only the text gets displayd, the image column is blank. Is it possible at all to mix text and images in report mode? If not, what other wxControl class can I use to get the desired result?
Many Thanks in advance.
Yes, it is possible, and the listctrl sample shows how to do it, in particular see MyFrame::InitWithReportItems() function. The only difference with your code seems to be that you use a different InsertItem() overload, so perhaps you should use InsertItem(i, "") instead.
Also check that your image list does have the 5 icons in it.
More generally, trying to reduce the differences between your code and the (working) sample will almost always quickly find the problem.
Thanks, VZ, but I found out that it's not the InsertItem() but the SetImageList(). My image list was correct, but the "which" parameter wasn't. Replacing wxIMAGE_LIST_NORMAL by wxIMAGE_LIST_SMALL fixes the problem! I thought "SMALL" was only meant for the SMALL_ICON mode and that "NORMAL" should be the default. But yes, that makes sense, normal icons are big and don't fit in the text display. Would be nice if the documentation had told us that before long trial and error...
This is a simple example for SMALL ICONIC VIEW USING WXLISTCTRL .Please place this code inside the class declaration.I did it in Frame based Windows Application using CODE BLOCKS.It will be useful to you.
wxImageList *il=new wxImageList(32,32,false,0);
wxImageList *i2=new wxImageList(32,32,false,0);
wxDir dir(wxGetCwd());
wxDir dir1(wxGetCwd());
if ( !dir.IsOpened() )
{
// deal with the error here - wxDir would already log an error message
// explaining the exact reason of the failure
return;
}
if ( !dir1.IsOpened() )
{
// deal with the error here - wxDir would already log an error message
// explaining the exact reason of the failure
return;
}
puts("Enumerating object files in current directory:");
wxString path, filename, dirstring,filename1, dirstring1, img,imgPath,path1,img1,imgPath1;
int i=0;
path=wxT("C:\\testing\\splitterwindow\\set\\devices");
path1=wxT("C:\\testing\\splitterwindow\\set\\actions");
img=wxT("C:\\testing\\splitterwindow\\set\\devices\\");
img1=wxT("C:\\testing\\splitterwindow\\set\\actions\\");
bool cont=dir.Open(path);
bool cont1=dir1.Open(path1);
cont = dir.GetFirst(&filename, wxEmptyString, wxDIR_DEFAULT);
dirstring.Append(filename.c_str());
cont1 = dir1.GetFirst(&filename1, wxEmptyString, wxDIR_DEFAULT);
dirstring1.Append(filename1.c_str());
while ( cont )
{
imgPath.clear();
cont = dir.GetNext(&filename);
dirstring.Append(filename.c_str());
// Consturct the imagepath
imgPath.Append(img.c_str());
imgPath.Append(filename.c_str());
//Now, add the images to the imagelist
il->Add(wxBitmap(wxImage(imgPath.c_str())));
i++;
}
while ( cont1 )
{
imgPath1.clear();
cont1 = dir1.GetNext(&filename1);
dirstring1.Append(filename1.c_str());
// Consturct the imagepath
imgPath1.Append(img1.c_str());
imgPath1.Append(filename1.c_str());
//Now, add the images to the imagelist
i2->Add(wxBitmap(wxImage(imgPath1.c_str())));
i++;
}
//assigning the imagelist to listctrl
ListCtrl1->AssignImageList(il, wxIMAGE_LIST_SMALL);
ListCtrl3->AssignImageList(i2, wxIMAGE_LIST_SMALL);
for(int j=0;j < il->GetImageCount()-1;j++)
{
wxListItem itemCol;
itemCol.SetId(j);
itemCol.SetImage(j);
itemCol.SetAlign(wxLIST_FORMAT_LEFT);
ListCtrl1->InsertItem(itemCol);
}
for(int k=0;k < i2->GetImageCount()-1;k++)
{
wxListItem itemCol1;
itemCol1.SetId(k);
itemCol1.SetImage(k);
itemCol1.SetAlign(wxLIST_FORMAT_LEFT);
ListCtrl3->InsertItem(itemCol1);
}
`

Zoom FPC in Magento

we use Zoom Full Page Cache from ezapps for Magento. The code can be found here:
https://github.com/ezapps/Zoom-Magento-FPC
Although we see that development has been silent for a while we still enjoy this product. We only see now that working with a multistore that site A is loaded in site B. But it is supposed to support multistore.
Our question is: Has anyone come across this issue for a multisite and know how to fix it?
merci
Zoom looks for:
self::$STORE = isset($_SERVER['MAGE_RUN_CODE'])
The problem is that the ezzoom.php is the first line of PHP code in index.php
What yoou need to do is place the IF ELSE code for store selection based on domain ABOVE the call to ezzoom.php in index php
then it works fine
Now the code is like
$call to ezzoom.php on first line
OTHER CODE HERE
switch($_SERVER['HTTP_HOST']) {
case 'winkel1.nl':
Mage::run('winkel2', 'website');
break;
case 'winkel2.nl':
Mage::run('winkel2', 'website');
break;
default:
Mage::run();
break;
}
and this needs to be
switch($_SERVER['HTTP_HOST']) {
case 'winkel1.nl':
Mage::run('winkel2', 'website');
break;
case 'winkel2.nl':
Mage::run('winkel2', 'website');
break;
default:
Mage::run();
break;
}
$call to ezzoom.php on first line
OTHER CODE HERE
Then the environment variable is known by ezzoom

Resources