i'm getting this error:
ctx.drawImage(avatar, 50, 50 );
^
Error: Image given has not completed loading
at Request.request.get
when trying to do this:
app.get('/test', (req, res) => {
let Canvas = require('canvas')
, Image = Canvas.Image
, canvas = new Canvas(500, 500)
, ctx = canvas.getContext('2d');
let request = require('request');
let avatar = new Image;
request.get('http://s.4pda.to/pKugVJ7TmgG1Tg5z0SsVLfRCUqTAz2oqz1lz2z2co.jpg', (err, res) => {
avatar.src = res;
ctx.drawImage(avatar, 50, 50 );
});
ctx.font = '30px Impact';
ctx.rotate(.1);
ctx.fillText("Awesome!", 50, 100);
let te = ctx.measureText('Awesome!');
ctx.strokeStyle = 'rgba(0,0,0,0.5)';
ctx.beginPath();
ctx.stroke();
res.setHeader('Content-Type', 'image/png');
canvas.pngStream().pipe(res)
});
i'm using node 8.3.0, node-canvas 1.6.6, mac os x 10.12.6.
I have already tried to reinstall and rebuild cairo, jpg/png libs, pixman, node-canvas but it didn't help me.
For anyone researching this, see the comment by LinusU on 13 August 2017, here:
https://github.com/Automattic/node-canvas/issues/959
Cribbing from there, he suggests a method such as this to load an image, and wait for its loading:
function loadImage (url) {
return new Promise((resolve, reject) => {
const img = new Canvas.Image()
img.onload = () => resolve(img)
img.onerror = () => reject(new Error('Failed to load image'))
request.get(url, (err, res) => {
if (err) return reject(err)
img.src = res.body
})
})
}
It worked nicely for me.
Related
Steps to reproduce this error:
Download or clone this Satori example:
https://codesandbox.io/s/cover-image-bf6282?from-embed=&file=/src/index.tsx
Run the example (npm start) and press the Download button in the launched page.
You'll get this error:
Uncaught (in promise) Error: Satori is not initialized: expect yoga to be loaded, got undefined
What could be the problem, and how to fix it?
I think the problem is here:
svg-utils.ts:
export const svgToPngURL = (svg: string) =>
new Promise<string>((resolve, reject) => {
const img = new Image();
img.onload = () => {
const canvas = document.createElement("canvas");
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
const ctx = canvas.getContext("2d");
ctx!.drawImage(img, 0, 0);
resolve(canvas.toDataURL("image/png"));
URL.revokeObjectURL(img.src);
};
img.onerror = (e) => {
reject(e);
URL.revokeObjectURL(img.src);
};
img.src = URL.createObjectURL(new Blob([svg], { type: "image/svg+xml" }));
});
export const downloadSvgAsPng = async (svg: string) => {
const pngURL = await svgToPngURL(svg);
try {
const a = document.createElement("a");
a.href = pngURL;
a.download = "Image.png";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
} finally {
URL.revokeObjectURL(pngURL);
}
};
I'm trying to generate a thumbnail from a video(.mov) but it's showing this error
Error: Error 4; details: DEMUXER_ERROR_NO_SUPPORTED_STREAMS: FFmpegDemuxer: no supported streams
.mp4 and other formats are working well.
chrome version: Version 101.0.4951.67 (Official Build) (64-bit)
Code:
async generateVideoThumbnail(file) {
console.log('generating thumbnail')
const binaryData = []
binaryData.push(file)
const canvas = document.createElement('canvas')
const context = canvas.getContext('2d')
const video = document.createElement('video')
video.setAttribute('src', URL.createObjectURL(new Blob(binaryData)))
video.onloadeddata = () => {
console.log('Yay! The readyState just increased to ' +
'HAVE_CURRENT_DATA or greater for the first time.');
};
video.loadstart = () => {
console.error(`load start`);
}
video.onwaiting = () => {
console.log('Video is waiting for more data.');
};
video.onprogress = () => {
console.log("Downloading video");
};
video.onerror = () => {
console.log('video error')
console.log("Error " + video.error.code + "; details: " + video.error.message);
}
console.log(video)
console.log('video load')
video.load()
let thumbnail = await new Promise((resolve) => {
video.onloadedmetadata = async () => {
console.log('on load')
canvas.width = video.videoWidth
canvas.height = video.videoHeight
video.currentTime = video.duration / 2
await video.play()
context.drawImage(video, 0, 0)
video.pause()
const blob = await new Promise((resolve) => {
return canvas.toBlob(function (blob) {
resolve(blob)
})
})
resolve(blob)
}
})
return thumbnail
},
I don't think Chrome is able to play mov files.
You can check this in the console, by writing something like:
const video = document.createElement('video')
console.log(video.canPlayType('video/mp4')) //expect 'maybe'
console.log(video.canPlayType('video/ogg')) //expect 'maybe'
console.log(video.canPlayType('video/quicktime')) //expect ''
Firefox on the other hand seems to be able to play them, you might try your app there.
I was trying to create an API endpoint for rotating images uploaded from client side. I'm sending images as base64 type, converted from blob (from simple <input tag), as follows:
const addImageBase64 = async (fileData) => {
const file = fileData;
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (event) => {
resolve(event.target.result);
};
reader.onerror = (err) => {
reject(err);
};
reader.readAsDataURL(file);
});
};
Then, on the server side, that's how the endpoint looks like:
app.post("/api/rotate-image", async (req, res) => {
try {
let buffer = Buffer.from(req.body.imageData, "base64"); //not working
let array = new Uint8Array(buffer); //not working
const image = await sharp(buffer)
.rotate(180)
.png({ quality: 100 })
.toBuffer();
console.log("success");
res.status(200).send({
success: true,
result: image,
});
} catch (e) {
console.warn(e);
}
});
And here, every my attempt is ending up with '[Error: Input buffer contains unsupported image format]' - either for Buffer or Uint8Array. Can anyone help me with this issue? What is the right input type for Sharp that acctually works?
Edit:
Error with logged buffer obj:
I'm trying to get the cropped image with react-image-crop module (blob). However I've problem with canvas, I guess it needs to be done asynchronously, but I'm not sure and I'm not sure if I've choosen the right approach either.
I've tried to do the same as written in documentation of react-image-crop in https://www.npmjs.com/package/react-image-crop.
I'm also trying to do the same as Stefan in this topic:
Get cropped image via react-image-crop module
state = {
image: '',
crop: {
aspect: 4/3,
x: 10,
y: 10,
width: 80,
height: 80,
},
imgSrc: null
}
getCroppedImg = (image, pixelCrop, fileName) => {
const canvas = document.createElement('canvas');
canvas.width = pixelCrop.width;
canvas.height = pixelCrop.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(
image,
pixelCrop.x,
pixelCrop.y,
pixelCrop.width,
pixelCrop.height,
0,
0,
pixelCrop.width,
pixelCrop.height
);
// As a blob
return new Promise((resolve, reject) => {
canvas.toBlob(blob => {
blob.name = fileName;
resolve(blob);
}, 'image/jpeg');
});
}
handleImageUpload = e => {
const uploadData = new FormData();
uploadData.append("image", this.state.imgSrc);
service.handleUpload(uploadData)
.then(response => {
this.setState({ image: response.secure_url });
})
.catch(err => {
console.log("Error while uploading the file: ", err);
});
}
handleImagePreview = e => {
this.setState({image: URL.createObjectURL(e.target.files[0]), imgSrc: e.target.files[0]})
}
handleOnCropComplete = (crop, pixelCrop) => {
this.getCroppedImg(this.state.imgSrc, pixelCrop, 'preview.jpg')
.then((res) => {
const blobUrl = URL.createObjectURL(res);
console.log(blobUrl);
})
}
render() {
return(
<>
<input required onChange={this.handleImagePreview} type="file" />
<div className="crop-div">
<ReactCrop
src={this.state.image}
crop={this.state.crop}
onChange={this.handleOnCropChange}
onComplete={this.handleOnCropComplete} />
<button className="submit-btn" onClick={this.handleImageUpload}>Crop the image</button>
</div>
</>
)
}
After resizing the cropped area on the image I'll get this error:
"TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'"
Image that I'm passing is Image File Object.
A file object isn't in the list expected as stated by the error message, so you have to create an object in the list from the object you have.
In this case we'll use the HTMLImageElement.
getCroppedImg = (imageFile, pixelCrop, fileName) => {
const canvas = document.createElement('canvas');
canvas.width = pixelCrop.width;
canvas.height = pixelCrop.height;
const ctx = canvas.getContext('2d');
var image = new Image();
var promise = new Promise((resolve, reject) => {
image.onload = function(){
ctx.drawImage(
image,
pixelCrop.x,
pixelCrop.y,
pixelCrop.width,
pixelCrop.height,
0,
0,
pixelCrop.width,
pixelCrop.height
);
resolve();
};
image.src = URL.createObjectURL(imageFile);
}).then(function(){
return new Promise((resolve, reject) => {
canvas.toBlob(blob => {
blob.name = fileName;
resolve(blob);
}, 'image/jpeg');
});
});
return promise;
}
Been trying various methods I've found via google but none seem to work. I'm working with signature-pad, the javascript/html5 canvas solution for eSignatures. I'm trying to save the canvas data as a png to a temporary folder (TempFolder/username/signature.png). To post the the results of toDataURL I'm using XMLHttpRequest. Everything else is Node.js / Express. I left the download in to make sure the dataURL is not corrupted. Since I wasn't able to use body-parser to grab the data from passing it through XMLHttp I instead populate a hidden field with the data then submit it.
Save to Profile Function
saveToServerButton.addEventListener('click', event => {
if (signaturePad.isEmpty()) {
const warning = document.getElementById('message');
warning.value = 'Please provide a signature first.';
} else {
const image = signaturePad.toDataURL().replace(/^data:image\/png;base64,/, '');
const httpRequest = new XMLHttpRequest();
const hiddenInput = document.getElementById('base64Data');
hiddenInput.value = image;
}
});
And the route in Node
const fs = require('fs');
// POST - ESignature Processing
router.post('/eSig/save/', ensureAuthenticated, (req, res) => {
const trimmedData = req.body.base64Data;
console.log(`The trimmed data is: ${trimmedData}`);
const buffer = Buffer.from(trimmedData);
const usernameForFolder = req.user.username;
const userFolder = `${dir}/${usernameForFolder}`;
if (!fs.existsSync(userFolder)){
fs.mkdirSync(userFolder);
fs.writeFile(`${userFolder}/signature.png`, buffer, 'base64', err => {
if (err) throw err;
console.log('saved');
});
res.redirect('../../profile');
} else {
fs.writeFile(`${userFolder}/signature.png`, buffer, 'base64', err => {
if (err) throw err;
console.log('saved');
});
res.redirect('../../profile');
}
});
Figured it out. Here is the working code (buffer's need to know it's 'base64')
Save to Profile Function
saveToServerButton.addEventListener('click', event => {
if (signaturePad.isEmpty()) {
const warning = document.getElementById('message');
warning.value = 'Please provide a signature first.';
} else {
const image = signaturePad.toDataURL().replace(/\s/g, '+').replace(/^data:image\/png;base64,/, '');
const httpRequest = new XMLHttpRequest();
const hiddenInput = document.getElementById('base64Data');
hiddenInput.value = image;
}
});
Route on Node.js to save
// POST - ESignature Processing
router.post('/eSig/save/', ensureAuthenticated, (req, res) => {
const trimmedData = req.body.base64Data;
const buffer = Buffer.from(trimmedData, 'base64');
const usernameForFolder = req.user.username;
const userFolder = `${dir}/${usernameForFolder}`;
if (!fs.existsSync(userFolder)){
fs.mkdirSync(userFolder);
fs.writeFile(`${userFolder}/signature.png`, buffer, 'base64', err => {
if (err) throw err;
console.log('saved');
});
res.redirect('../../profile');
} else {
fs.writeFile(`${userFolder}/signature.png`, buffer, 'base64', err => {
if (err) throw err;
console.log('saved');
});
res.redirect('../../profile');
}
});