EN
JavaScript - resize JPG image (Vanilla JS)
4
points
In this article, we would like to show how to resize or reduce image size in pure JavaScript using canvas.
Practical example:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<img id="dst-image">
<script>
function resizeImage$1(imageElement, newWidth, newHeight, newQuality) {
var canvas = document.createElement('canvas');
canvas.width = newWidth;
canvas.height = newHeight;
var context = canvas.getContext('2d');
context.drawImage(imageElement, 0, 0, newWidth, newHeight);
try {
return canvas.toDataURL('image/jpeg', newQuality);
} catch (e) {
return null;
}
};
function resizeImage$2(imageUrl, newWidth, newHeight, newQuality, onReady, onError) {
var image = document.createElement('img');
image.onload = function() {
var dataUrl = resizeImage$1(image, newWidth, newHeight, newQuality);
if (dataUrl) {
onReady(dataUrl);
} else {
if (onError) {
onError('Image saving error.');
}
}
};
image.onerror = function() {
if (onError) {
onError('Image loading error.');
}
};
image.src = imageUrl;
};
// Usage example:
var srcUrl = 'https://dirask.com/static/bucket/1655940866050-LbA292PD9v--original-image.jpg';
var newWidth = 300;
var newHeight = 300;
var newQuality = 0.9; // should be from 0 to 1.0
function onReady(dataUrl) {
var dstImage = document.querySelector('#dst-image');
dstImage.src = dataUrl;
}
function onError(message) {
console.error(message);
}
resizeImage$2(srcUrl, newWidth, newHeight, newQuality, onReady, onError);
</script>
</body>
</html>
Used resource:
