I am using a summernote in bootstrap as my editor. It looks good and I'm fond using it. I can get the texts inserted by the user, however, the problem is that when the user inserted an image, the src of image returns to a binary text. I dont want to save this whole text of the src into the database, instead, I want the image to be saved directly to my disk drive and copy the image name and save it into the database.
Does anybody know this?
Related
I am making an e-commerce website in php with mysql database, I am using a web template for front-end, the issue is when I try to upload the image from database, it is not showing in proper dimension, however when i upload the same image without database it works and shows in proper size as defined in template. I don't know why is this happening because there are same css and same image class define for both.
Here is the screenshot of image in without database:
And below with fetching from database:
I am stuck how to make image display same as without database.
Simply add width and height to the image at front end and only retrieve image in src tag
This can fix your problem
& if it didn't fix please provide your code snap
I'm using Summernote editor to collect user input, during this process users can insert images, the image data is then saved into mysql database using PHP & SQL, I want the ability to extract the file(s) from the database record, save the image then replace the image with url as an image tag.
I cannot find any posts that show how this can be achieved.
Here is a cut down from example record.
<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJoAAACaCAYAAABR/1EXAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAACHDwAAjA8AAP1SAACBQAAAfXkAAOmLAAA85QAAGcxzPIV3AAAKLD9k7w7ivJbRkANSszRi8CgzmrKVwMC0gHCJi5PR/OcAiiQZFWxGqZuPIyGm3LhH6UtvKacCYyheltOgEH7xEcnsLp9JT0WVzEskyMItDViixhrypx0LCOARwc40pM8FunWS/T70+V/wPr/bssGCXNzQAAAABJRU5ErkJggg==" data-filename="alisonD_154x154.png" style="width: 25%;"><br></p>
To summarise, I want to be able to post process SQL records, when find images embedded, to save the data as an image file, replace the embedded image with a url which will point to the saved file.
Thanks david, you pointed me in the direction I needed, I will solve my problem using PHP DOM Parser. I've located this post which has the full solution.
Parse web pages with PHP Simple DOM Parser
so I started using tinymce for my blog posts and there is this problem with imagetools, they work while images are being edited, but after the article is posted, only this BIG url is showing. I think the problem is that, the blob image which is created while editing is not saved and I need to save it, right?
By the way I am using laravel.
When you edit images using the image tools they will always be turned into a Base64 or BLOB encoded image - the image tools function in the browser and know nothing (directly) of the application in use (e.g. Laravel). As such its up to the application to determine what to do with these images:
https://www.tinymce.com/docs/advanced/handle-async-image-uploads/
The basic process is that TinyMCE will create a separate HTTP POST for each image that you modify with the image editor. It will send that image to a URL of your choosing (via HTTP POST) based on the setting of the images_upload_url option in your init.
The image handler at the URL referenced in the images_upload_url (which you have to create) has to do whatever needs to be done to "store" the image in your application. That could mean something like:
Store the item in a folder on your web server
Store the item in a database
Store the item in an asset management system
I would assume Laravel has some APIs such as the Filesystem API that you could use to store the images appropriately.
Regardless of where you choose to store the image your image handler needs to return a single line of JSON telling TinyMCE the new location of the image. As referenced in the TinyMCE documentation this might look like:
{ location : '/uploaded/image/path/image.png' }
TinyMCE will then update the image's src attribute to the value you return. If you use the images_upload_base_path setting in the init that will be prepended to the returned location.
The net here is that TinyMCE knows when an embedded image exists in your content but it can't possibly know what to do with that image in the context of your application so that job (the "image handler") is something you must create.
Im working on a PDF. I just wanted to change the logos so I changed the Image and on the first site I get the new image in correct size so but in the second pdf the image is very large.....
Here the line : $this->Image('images/logo.jpg', 160,12.0,30 );
I find it screws up if I used the same image twice. Best practise is to use an image only one time in a PDF. Make a copy of it under a different name if you are going to use it again.
I'm working on something that requires the following:
There is an image with a particular header and footer, which is to serve as a kind of template/background
Users need to be able to upload an image, crop it, and drag it onto the template, and ideally position it too
New image gets saved
Do any of you happen to know a plugin or two that might achieve this functionality? I've got something working with jCrop, but I've done the image merging stuff myself, and it's not great. I'd prefer something more robust, so a standalone plugin would be best.
Thanks
You can achieve something similar using HTML5 Canvases, but its not elegant and obviously wont work in every browser.
The idea is to simply draw those images to a canvas and then set an img object to the source of the canvas
To save the canvas drawing as an image, we can set the source of an
image object to the image data URL. From there, a user can right click
on the image to save it to their local computer. Alternatively, you
could also open up a new browser window with the image data url
directly and the user could save it from there.
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
// set canvasImg image src to dataURL
// so it can be saved as an image
document.getElementById("canvasImg").src = dataURL;
View the full tutorial here