I uploaded some image to cloudinary - tried to manipulate (crop) the image but get the same image url (not cropped) - bug in cloudinary npm or I miss something?
var cloudinary = require('cloudinary');
....
var sourceUrl = cloudinaryImageDetails.url;
var croppedUrl = cloudinary.url(sourceUrl, {
width:30,
height: 30,
crop:'fill'
})
cloudinary.url works when supplied with the public_id of the uploaded image as first argument (instead of full image's URL).
For example,
cloudinary.url (`public_id`, { width:30, height: 30, crop:'fill' })
outputs -
http://res.cloudinary.com/cloud_name/image/upload/c_fill,h_30,w_30/public_id
Related
I am trying to make a GitHub banner generator using express js, my code works fine locally but when I try to host it on vercel all the image files go missing and I get no such file or directory found error.
app.get('/api',async(req,res)=>{
const title = req.query.title || "Github Banner Generator"
const subTitle = req.query.subtitle || ""
const theme = req.query.theme || "default"
const _theme = require(`./themes/${theme}/${theme}.json`)
const image = await loadImage(fs.readFileSync('themes/default/image1.png'))
const img = await new Canvas(1280, 520)
.printImage(image,0,0)
.setColor(_theme.primaryColor)
.setTextFont('bold 60px Serif')
.setTextAlign('center')
.printText(title,1280/2,520/2)
.setTextFont('20px Serif')
.setTextAlign('center')
.printText(subTitle,1280/2,(520/2)+60)
.toBuffer();
res.set({'Content-Type':'image/png'})
res.send(img)
})
I think the image path isn't right because of you didn't used an absolute path. You should read more about the difference between ./ and __dirname in NodeJS.
My solution would be to use __dirname + (the file location depending on the current file folder)
const image = await loadImage(fs.readFileSync(__dirname
+ '/themes/default/image1.png'));
Here, I assume that your project structure looks something like this...
/package.json
/index.js (contains the code)
/themes/default/image1.png
I would like to know the type of file obtained with req.files in NodeJS. I need this because the file uploaded has to be a photo for the well work of the app. It not only helps me to check that it is not a .jpg since you can make a .txt and change the extension.
The form is the following:
form(class="form add-form space-down" method="POST" enctype="multipart/form-data")
div.title
h1 UPLOAD NEW PROGRESS
div.form-group
label(for="weight") Weight:
input(type="number" name="weight" class="form-control" placeholder="Enter your weight")
div.form-group
label(for="front") Upload a front photo
input(type="file" name="front" accept="image/*")
div.form-group
label(for="from_side") Upload a from side photo
input(type="file" name="from_side" accept="image/*")
div.form-group
label(for="backwards") Upload a backwards photo
input(type="file" name="backwards" accept="image/*")
And the router handle is the following to obtain the photos uploaded:
routerProgress.post("/home/upload-progress", (req, res) => {
const front = req.files.front;
const from_side = req.files.from_side;
const backwards = req.files.backwards;
}
How can I be sure that front, from_side and backwards are photos?
If anyone has any idea how to do it, I would be very grateful if you could help me.
You can do something like this. Create a function which returns the extension of the file and you can check if it is a valid image extension or not.
routerProgress.post("/home/upload-progress", (req, res) => {
const front = getFileExtension(req.files.front);
const from_side = getFileExtension(req.files.from_side);
const backwards = getFileExtension(req.files.backwards);
if (front) {
// its an image, do something
}
}
function getFileExtension (filename) {
const allowedFileExt = ['JPEG', 'JPG', 'PNG', 'GIF', 'TIFF', 'PSD', 'PDF']; // you can add as per your requirement
const fileExt = /[^.]+$/.exec(filename);
return allowedFileExt.includes(fileExt[0].toUpperCase());
}
If that is the case, you should use mmmagic, it checks the content of the file instead checking only the extension. Try using this lib it will be more useful for your use case. Also, take a look at this npm package image-type
What Nodejs image processing lib should I use with Heroku to make a dynamic png?
I was first trying to make easy SVG file but it seems Facebook sharing does not accept SVG, so I need to generate PNG/GIF.
I was hoping a code like this that would return the image binary stream in http server Response.
//create image
var gd = require('node-gd');
var img = gd.createSync(200, 80);
img.colorAllocate(0, 255, 0);
img.savePng('../test.png', 0, function(error) {
if (error) throw error;
img.destroy();
})
I am using html2canvas lib to generate png image from html code. The html combine local images (from images folder) and remote images (from url address - server). The image is looking great but the remote images is missing. any idea how can i fix that issue?
$('#save').click(function () {
var elm = $('.media_container_1200628').get(0);
var width = "1200";
var height = "628";
html2canvas(elm).then(function (canvas) {
Canvas2Image.saveAsPNG(canvas, width, height);
})
});
As explained in the documentation you should allow cross-origin images to taint the canvas.
https://html2canvas.hertzen.com/configuration
In your specific case you can do the following:
$('#save').click(function () {
var elm = $('.media_container_1200628').get(0);
var width = "1200";
var height = "628";
html2canvas(elm, { allowTaint: true }).then(function (canvas) {
Canvas2Image.saveAsPNG(canvas, width, height);
})
});
I am using multer to upload single image...
router.post('/register', upload.any(), function(req,res,next){
var img = req.files;
}
If I print the img the it is showing the object properly( originalname, mimeType, size etc) but when i trying to add the propertys in individual variable ( originalname = img.originanae;/req.files.originalename;) then originalname is showing undefined.
Why ??
use req.files[0].originalname instead of req.files.originalname