I am using Laravel 8.0.
Many email providers do not support box-shadow peroperty of CSS. Therefore as a work around, I'm loading images with box-shadow.
This is the image I'm loading from skillshare website and when I use direct link in my blade email template, this image is loaded correctly and that's how it looks.
But then I decided to save this image in my S3 bucket and serve it through CDN, in that case Gmail not showing the box-shadow of the image but rather it is being displayed as black background as below.
I viewed the same email at https://temp-mail.org/, and the imaged loaded correctly here.
My issue is related Gmail and occures when image is loaded from S3 bucket.
Related
I'm using "standalone button" for many pages on website (product/create.blade.php, banner/create.blade.php, ...)
$('#lfm').filemanager('image');
And i also call an image handler event after the image is uploaded,
based on the answer of Sti3bas: https://laracasts.com/discuss/channels/tips/resize-and-optimize-images-upon-upload-with-laravel-filemanager
But all uploaded images are resized, i just want the images of the product to change, so is there any way to determine the image uploaded from the product/create.blade.php page in the "ResizeUploadedImage" event.
I created a Styled Media Receiver. Hosted the css and images on AWS S3. I started showing up after few hours. Then I changed the images for logo and splash, but, still old images are showing up. I even factory reset the chromecast and connected again, but no respite.
Does anyone has any clue?
If you are using the same name for the updated images, maybe S3 is caching the images or css? Try renaming them and update your styled application settings and see if that does any good. You can also start a chrome debug session and see what images are pointing at to catch any possible issues that way as well.
I'm running a Vanilla Forum with a FileUpload plugin, allowing users to upload images and insert the corresponding code directly into the body of their post. These images work with FancyBox when clicked, linking together nicely within the page. However, should a user use a third-party image hosting site (i.e. Imagevenue, Imageshack, Postimage.org) and copy and paste the resulting image code, it deactivates the FancyBox feature associated with all images previously on the page, so when you click on an image uploaded via FileUpload it opens in a new window now instead of in a FancyBox.
My question is one of two things:
a) Is it possible to fix this formatting issue so that if a user does choose to use a third-party image hosting service then it will not affect the fancybox of my previous images.
or
b) Is it possible to block this type of image code from being inputted in the body of a post to prevent this from ever happening.
Thank you and please reply if you would like more information!
Most likely the generated code from those third-party hosting sites has not an image extension (JPG, PNG, GIF) so fancybox doesn't know what type of content needs to handle.
If you are binding fancybox like
$(".fancybox").fancybox();
... you could force the type of content to image like
$(".fancybox").fancybox({
type : "image"
});
I don't really see how pasting the code of a new image will disable the code for existing ones if you want to elaborate.
I am new HTML5 and Ajax and I was wonder if it's possible with these technologies to write a service that would allow a user to upload an image for example in the background so they could continue browsing different pages on the same site while the upload is in progress?
XHR2 AJAX request can submit binary data like images:
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Example.3A_Uploading_a_user-selected_file
However, changing the address bar (windows.location) will interrupt the upload as the new page is loaded. You can work around of this by loading pages via AJAX and using History API:
https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history
Optionally you can resize image on the client-side using <canvas> to decrease the needed bandwidth and the server load
Resizing an image in an HTML5 canvas
Also if you touch the image in <canvas> you might want to keep JPEG metadata, like rotation and GPS coordinates around,
https://github.com/miohtama/Krusovice/blob/master/src/tools/resizer.js
Save PNG (etc.) work in this demo in Firefox, but not Chrome.
Convert to PNG (etc.) work in Firefox and Chrome.
Is there a way *in Chrome* to save an image of a canvas element to a local file -- or to a server?
The simplest way to do it is to use the toDataURL() function.
Say you have a canvas:
var canvas = document.getElementById("myCanvas");
Then, with a button with id "saveButton", you can make it pop open a new window with the canvas as a png, and the user can save that page.
document.getElementById("saveButton").onClick = function() {
window.open(canvas.toDataURL());
}
Sam Dutton: (regarding comment left in Timothy Armstrong's answer) The 'SECURITY_ERR: DOM Exception 18' error that you're getting is probably because in your Canvas you've loaded an image that comes from a different domain, eg. maybe the image is hosted on your server hence why you see the error locally but not when hosted on your server. Whenever you load images from a foreign domain into a Canvas, certain API calls are banned for security reasons such as toDataUrl() and getPixelData(). It's similar to the same origin policy issue you see with cross-domain Ajax calls.
As for SaveAs Canvas, browser implementation is spotty, for browsers that don't support it, I believe you can still have the canvas appear as an image inside an <img /> tag. Just set the src attribute to the data you get back from toDataUrl(), then you can invite the user to right click -> save as. I believe the demo in the link you posted does this.