I'm working on a project that uses express.js for backend and the ejs rendering template for frontend. I've uploaded some images using filepond and the images were converted to base64. However, while viewing the output on the browser, the images look as though they're broken (with a small square at the top-left corner).
I need help with getting this fixed. Here's the code for the function to save the images and convert to base64:
function saveCover(book, coverEncoded) {
if (coverEncoded == null) return;
const cover = coverEncoded;
if (cover != null && imageMimeTypes.includes(cover.type)) {
book.coverImage = new Buffer.from(cover.data, "base64");
book.coverImageType = cover.type;
}
}
The problem I believe will be coming from how you are retrieving the image. If the code you've shown above saves the image (i.e you are seeing some data in the database), then you should focus your attention on the code that retrieves the image to display on the webpage.
Related
If I drag and drop a jpg image from my hard drive to Supabase Storage Public No RLS bucket then everything works (i.e. there is a preview thumb, and when I get the url path and paste it into browser the photo is displayed.
If I use the same photo and upload as:
const { data, error } = await this.supabase.storage.from('report-photos').upload(name, file,{contentType:'image/jpeg'});
The insert is successful, but there is no image preview and pasting the provided url from Supabase just shows a blank page with small white square, although the bucket list view shows it as a image/jpg file and it has data.
does someone use Chart.js-to-image in his laravel application?
i render a chart.js chart in my application and i will save it as a img in my public folder to use it later to render a pdf with dompdf. but im not able to implement the chartjs-to-image in my project. i have a error with
const fs = require('fs')
i also try it with base64 image but there is the problem that my chart is not the same bevor and after base64img ( peak bevore goes up to 30 after only to 20).
How I can get the image that the user just uploaded to display in another element on the same page? I'm using the storeAsFile property within the filePond options.
As note, I'm currently displaying the image with ImagePreview plugin within the filepond input instance, but i want to show this image on another part of the page. Hope i'm being clear enough.
Found the solution,
pondPhoto.on('addfile', (error, file) => {
// this object contains the file info
console.log(file.file)
// you can construct a blob object
const imageSrc = URL.createObjectURL(file.file)
// then you may attach it to any image in your DOM
document.querySelector('img').setAttribute('src', imageSrc)
})
Currently, I am Working on image editor that allows me to crop an image and apply a filter.
I am using fabric js version 1.7.22.
I want to implement crop functionality.
so my cropping flow is like Below :
crop image using a plugin and ger base64 of the cropped image.
generate blobUrl from base64 which help to display image in fabric js canvas.
After Cropping the image, I Just replace old image src with new One.
It works fine when an image has no filter.
but when I try to set a filter in the image first then try to replace src using setSrc() function.
It throws an error like Below
filter.applyTo is not a function
I have created one fiddle for demonstrating to replace src after the apply filter.
https://jsfiddle.net/Mark_1998/98gLhcb4/1/
And I Can't upgrade my fabric js version. If any patch Available then
Please Help Me.
The problem lies in this piece of code:
canvas.getActiveObject().setSrc('http://fabricjs.com/assets/pug_small.jpg', function(){
canvas.renderAll();
}, canvas.getActiveObject().toObject());
You're passing canvas.getActiveObject().toObject() as an options object, which is assigned to your image in setSrc() -> setElement() -> _initConfig().
toObject() serializes your fabric.Image, and filters array no longer contains the actual fabric.Filter, but rather a serialized version of it. So, it does not have a prototype with applyTo() method on it, hence the error filter.applyTo is not a function when fabric tries to reapply filters to your image after setSrc().
Instead of passing the whole serialized object as options, you'll need to pick the properties you actually want to be passed. As I'm not sure about what your requirements are, I tried replacing the above code with the following and it worked for me:
var options = canvas.getActiveObject().toObject();
delete options.filters;
options.crossOrigin = true;
canvas.getActiveObject().setSrc('http://fabricjs.com/assets/pug_small.jpg', function(){
canvas.renderAll();
}, options);
Note the options.crossOrigin = true - you won't be able to apply filters without it.
I am creating PDF files using blobs in Google Apps Script from a HTML code, but the problem is that HTML code has an image (referenced by "http") but the created pdf can't show it.
This is my code
function createBlobPDF(myMessage,myTitle){
var blobHTML = Utilities.newBlob(myMessage, "text/html", myTitle+ ".html");
var myPDF = blobHTML.getAs("application/pdf");
return myPDF;
}
Any solution? thanks!!
If the images in HTML are loaded from URLs, the converted PDF file doesn't include the images. If you want to include the images in the converted PDF file, please put the images to HTML as base64 data.
In order to confirm this situation, please see the following sample script. This sample script puts an image as URL and base64 data. The result is displayed them to a dialog and created a PDF file.
When you use this script, please copy and paste to the script editor of Spreadsheet.
Sample script :
function myFunction() {
// image
var url = "https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a";
var blob = UrlFetchApp.fetch(url).getBlob();
var b64 = blob.getContentType() + ';base64,'+ Utilities.base64Encode(blob.getBytes());
var html = "URL<img src=\"" + url + "\">Base64<img src=\"data:" + b64 + "\">";
var h = HtmlService.createHtmlOutput(html);
// Open dialog with the images.
SpreadsheetApp.getUi().showModalDialog(h.setWidth(500).setHeight(200), 'Sample');
// Create from HTML to PDF file.
DriveApp.createFile(h.getAs("application/pdf").setName("text.pdf"));
}
Result of dialog :
Both images can be seen.
Result of PDF file :
Only the image of base64 can be seen.
Note :
This is a simple script. So please modify this to your environment.
References :
How to display Base64 images in HTML?
If I misunderstand your question, I'm sorry.
I tested converting html to pdf with image content. It works but in the bottom of a box, the color does not work! How to make the color to appear in the background of a box?
I wanted to show you my little treatment as an example "<>" but it doesn't work because there is no window for code.gs . Shame...
In short, see the final result in pdf, attached
before clicking on the "validate" button, the screen is displayed, see the screenshot below. this is where you "capture" the HTML presentation and then run to convert HTML to PDF.
after clicking on "validate", here is the result, see below :
normally, I would like to have the same result between screen and PDF.
Then, how to do it ?