Im resizing the image size to make it smaller im taking 20% of the height and 20% of the width. but im getting wrong result is getting me a higher size of an image.
function imageToDataUri(img, width, height) {
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
return canvas.toDataURL();
}
imageToAdjust = 'data:image/png;base64,' + window.btoa(e.target.result);
var img = new Image;
img.onload = resizeImage;
img.src = imageToAdjust;
function resizeImage() {
console.log(img.width);
console.log(img.height);
var x = img.width - (0.2 * img.width);
var y = img.height - (0.2 * img.height);
console.log(x);
console.log(y);
var newDataUri = imageToDataUri(this, x, y);
console.log(newDataUri);
var base64 = newDataUri.match(/data:(.+);base64,(.+)/);
console.log('after resizing');
console.log(base64);
var base64Number = Math.round((base64[2].length )*3/4) ;
console.log(base64Number);
}
what im getting through console.logs is for example i have image with size is 5663096 width 4032 and height 3024 then after i take 20% off im getting it width 3225.6 and height 2419.2 which is correct. but after i call imageToDataUri(this, x, y); function the image size will be 12031242 which is double. it should be smaller than 5663096
Related
I want to know how we can scale and crop an image in Javascript. I want to scale it down to 300x300px and crop it a little.
Do you have any suggestions ? I have the following code :
function cropImage(imagePath, newX, newY, newWidth, newHeight) {
//create an image object from the path
var img = document.createElement('img');
img.src = "data:image/png;base64,"+imagePath;
//alert(img.width);
//alert(img.height);
//initialize the canvas object
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
//set the canvas size to the new width and height
canvas.width = 300;
canvas.height = 300;
//draw the image
ctx.drawImage(img, newX, 75, 300, 300, 0, 0, 300, 300);
variables.imageCrop = canvas.toDataURL();}
Thank you !
Try it:
And learn more about .drawImage()
function cropImage(imagePath, leftRight, topBottom, newWidth, newHeight) {
const img = document.createElement('img');
img.src = imagePath;
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
img.addEventListener('load', function() {
//Set your canvas size as your choice
//here i just scaled by 10 with original dimension
canvas.width = img.naturalWidth*10;
canvas.height = img.naturalHeight*10;
const cropLeft = leftRight[0];
const cropRight = img.naturalWidth - leftRight[0] - leftRight[1];
const cropTop = topBottom[0];
const cropBottom = img.naturalHeight - topBottom[0] - topBottom[1];
ctx.drawImage(
img,
cropLeft,cropTop,
cropRight, cropBottom,
0,0, //here you can control placement of cropped image from left and top, by default it stays in 0,0 meaning the top left corner of the canvas
newWidth,newHeight //new width and height of cropped image
);
});
}
//Size of this image is 100x100 px
const img = "https://dummyimage.com/100.png/09f/fff";
//here [10,10] meaning crop 10px from left and 10px from right
//here [20,20] meaning crop 20px from top and 20px from bottom
cropImage(img,[10,10],[20,20], 100, 100);
I have come up with a function which transform the width and height of an image to new values,
function imageToDataUri(src, width, height) {
// create an off-screen canvas
var img=new Image();
img.src=src;
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// set its dimension to target size
canvas.width = width;
canvas.height = height;
// draw source image into the off-screen canvas:
ctx.drawImage(img, 0, 0, width, height);
var d = ctx.getImageData(0, 0, width, height);
console.log('de from transformation is');
console.log(d);
return canvas.toDataURL();
}
The input to the function is a base64 string and the output is the same as well, but sometimes above function gives me a complete black image when I use my input image. Can someone tell me is there anything I am missing in my codes?
I am trying to take the image that is 1280x960 and resize it using drawImage so that is is 600 pixels high. I have worked out the ratio that I think I need to achieve this but don't know how to apply...
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function () {
canvas.height = this.height;
canvas.width = this.width;
ratio = canvas.height / canvas.width;
console.log(canvas.width + 'x' + canvas.height + ' | ratio = ' + ratio);
ctx.drawImage(img, 0, 0, 300, 500);
}
img.src = 'https://c.slashgear.com/wp-content/uploads/2015/06/dxo-one-sample-3-1280x960.jpg';
<canvas id="mycanvas"></canvas>
How can I specify the resulting image size, making the width automatic? I eventually want this function to resize any image to 500 pixels high.
Here is a solution, a bit roundabout but seems to work. I created a new image using toDataURL() from the original sized canvas. Although the new image is reduced, the total dimension is still that of the original image, such that the remaining space is transparent. Then I set and clip this image into a new canvas. The resulting canvas has the correctly sized image which can be copied and pasted with the desired dimension.
If the snippet below does not display the image in the new canvas, please try the following fiddle which seems to work well: https://jsfiddle.net/jfeferman/u80fhy0z/
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.crossOrigin = "Anonymous";
img.onload = function () {
canvas.height = this.height;
canvas.width = this.width;
ratio = canvas.height / canvas.width;
console.log(canvas.width + 'x' + canvas.height + ' | ratio = ' + ratio);
ctx.drawImage(img, 0, 0, 500 / ratio, 500);
var newImage = new Image();
newImage.crossOrigin = "Anonymous";
newImage.src = canvas.toDataURL();
var newCanvas = document.getElementById("newcanvas");
newCanvas.height = 500;
newCanvas.width = 500 / ratio;
var newCtx = newCanvas.getContext('2d');
newCtx.drawImage(newImage, 0, 0, 500 / ratio, 500, 0, 0, 500 / ratio, 500);
}
img.src = 'https://c.slashgear.com/wp-content/uploads/2015/06/dxo-one-sample-3-1280x960.jpg';
#mycanvas {
display: none;
}
<canvas id="newcanvas"></canvas>
<canvas id="mycanvas"></canvas>
I applied the ratio to your call to drawImage and it seems to work:
ctx.drawImage(img, 0, 0, 500 / ratio, 500);
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function () {
canvas.height = this.height;
canvas.width = this.width;
ratio = canvas.height / canvas.width;
console.log(canvas.width + 'x' + canvas.height + ' | ratio = ' + ratio);
ctx.drawImage(img, 0, 0);
canvas.style.width = 500 / ratio + "px";
canvas.style.height = 500 + "px";
}
img.src = 'https://c.slashgear.com/wp-content/uploads/2015/06/dxo-one-sample-3-1280x960.jpg';
<canvas id="mycanvas"></canvas>
I've got a function in my Angular 1.5 app that resizes a base64-encoded image if it's over a maximum size. This function works great in Chrome, but in Firefox it returns a empty string instead of anything base64-encoded.
I've got it packaged up in an Angular app in Plunker here, but here's the relevant function:
// Image resizing
$scope.resizeImage = function(base64Data, maxWidth, maxHeight) {
img = document.createElement('img');
img.src = base64Data;
height = img.height;
width = img.width;
if (width > maxWidth) {
ratio = maxWidth / width; // get ratio for scaling image
height = height * ratio; // Reset height to match scaled image
width = width * ratio; // Reset width to match scaled image
}
// Check if current height is larger than max
if (height > maxHeight) {
ratio = maxHeight / height; // get ratio for scaling image
width = width * ratio; // Reset width to match scaled image
height = height * ratio; // Reset height to match scaled image
}
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// We set the dimensions at the wanted size.
canvas.width = width;
canvas.height = height;
// We resize the image with the canvas method drawImage();
ctx.drawImage(img, 0, 0, width, height);
var dataURI = canvas.toDataURL();
return dataURI;
}
You may need to wait until the <img> is loaded:
img.onload = function() {
// now your image is ready for use
};
Basically I need to reduce the size of an image and cut it to be a triangle. How would I do this using javascript?
This is approximately what I am looking to accomplish (obviously it would be a straight line, but that's the best I could do in paint):
Here's the code I have so far:
HTML: <div id = "mydiv"></div>
Javascript:
document.getElementById("mydiv").onclick = moulding_change('5f52a13c425655fa62058418542b95ca');
function moulding_change(thumb)
{
var ppi = 15;
var SITE_URL = "http://www.asa.tframes.org:1881";
var img = new Image();
img.src = SITE_URL + '/system/components/compimg/' + thumb + '/pattern';
img.onload = function() {
console.log("width before " + this.width);
//width needs to be the same as the height (in this case 450)
img.width = img.height / ppi;
//img.width = img.height;
img.height /= ppi;
console.log("width after " + this.width);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
canvas.style.position = "absolute";
canvas.style.zIndex = 5;
canvas.style.width = "1000px";
canvas.style.height = "1000px";
// Save the state, so we can undo the clipping
ctx.save();
// Create a shape, of some sort
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(img.width,0);
ctx.lineTo(img.width,img.width);
ctx.closePath();
// Clip to the current path
ctx.clip();
ctx.drawImage(img, 0, 0);
// Undo the clipping
ctx.restore();
$("#mydiv").append(canvas);
};
}
Thanks to Geoff, I was able to create canvas elements. The problem ended up being that I wasn't specifying a width, height for the image.