I have Monitor with resolution 1920 * 1080.
I am trying this very basic canvas drawimage() code on my PC.
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="scream" width="220" height="277"
src="test.jpg" alt="The Scream">
<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
};
</script>
</body>
</html>
So I am getting output like this:
Actually output should be same as original image, but it's not.
After going through similar questions on stackoverflow and , I understood that it has something to do with height and width.
How to use drawimage() properly for any screen size or device?
Edit: The test image dimensions are 3024 * 4032
I am trying to implement crop and save functionality using following plugin : /
So whatever height and width coordinates will be returned from there, I will crop that image from original and will draw on canvas.
Therefore the cropped image must be with actual resolution but displayed in smaller preview container.
I have Monitor with resolution 1920 * 1080.
I am trying this very basic canvas drawimage() code on my PC.
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="scream" width="220" height="277"
src="test.jpg" alt="The Scream">
<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
};
</script>
</body>
</html>
So I am getting output like this:
Actually output should be same as original image, but it's not.
After going through similar questions on stackoverflow and http://developer.mozilla, I understood that it has something to do with height and width.
How to use drawimage() properly for any screen size or device?
Edit: The test image dimensions are 3024 * 4032
I am trying to implement crop and save functionality using following plugin : http://odyniec/projects/imgareaselect/
So whatever height and width coordinates will be returned from there, I will crop that image from original and will draw on canvas.
Therefore the cropped image must be with actual resolution but displayed in smaller preview container.
Share Improve this question edited Dec 21, 2016 at 22:27 halfer 20.4k19 gold badges109 silver badges202 bronze badges asked Dec 21, 2016 at 10:41 Sushant TayadeSushant Tayade 1324 silver badges17 bronze badges 1- 1 Your source "image to use" is a much higher resolution than is displayed in the img tag, so when you try to draw it in the canvas, you need to specify the height and width you want to resize it to – Alex Commented Dec 21, 2016 at 11:00
4 Answers
Reset to default 5That's happens because your canvas has 240x297 but the context has 150X300.
I fix this problem make this way.
let canvas = document.createElement("myCanvas");
ctx = canvas.getContext("2d");
ctx.canvas.width = 240;
ctx.canvas.height = 297;
Using this syntax: context.drawImage(img,x,y,width,height); you can draw the image with set dimensions.
basically what the parameters do is:
- img: the image to draw.
- x: where to start drawing the image on the x axis.
- y: where to start drawing the image on the y axis.
- width: the width of the image on the canvas.
- height: the height of the image on the canvas.
if you want to draw the image on the whole canvas you can use this:
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,0,0,240,297);
}<p>Image to use:</p>
<img id="scream" width="220" height="277" src="https://i.vimeocdn./portrait/58832_300x300" alt="The Scream">
<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>source
The drawImage method takes also a width and height argument which will be used to draw the image. Try it like so:
ctx.drawImage(img, 10, 10, 220, 277);
using the size of the image.
see https://jsfiddle/dot8hgwd/1/ ,is zoom it.
function draw_canvas_image() {
var canvas = document.getElementById("image-holder-canvas");
var context = canvas.getContext("2d");
var imageObj = document.getElementById("myImageToDisplayOnCanvas");
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
imageObj.onload = function() {
var imgWidth = imageObj.naturalWidth;
var screenWidth = canvas.width;
var imgHeight = imageObj.naturalHeight;
var screenHeight = canvas.height;
var scaleX = screenWidth/imgWidth;
var scaleY = screenHeight/imgHeight;
var scale = scaleY;
if(scaleX < scaleY) scale = scaleX;
imgHeight = imgHeight*scale;
imgWidth = imgWidth*scale;
let x = y = 0;
if(imgWidth < screenWidth){
x = (screenWidth - imgWidth) / 2;
}else{
y = (screenHeight - imgHeight) / 2;
}
console.log('source ->', imageObj.naturalWidth, imageObj.naturalHeight, 'handle ->', imgWidth, imgHeight, "canvas ->", screenWidth, screenHeight);
context.drawImage(imageObj, 0, 0, imageObj.naturalWidth, imageObj.naturalHeight, x, y, imgWidth, imgHeight);
}
imageObj.src = 'http://7jptuv.1.z0.glb.clouddn./test_cav.png'; // width < height
// imageObj.src = 'http://r1.ykimg./050C000059C3103CADC0AE070702536E'; // width > height
}
document.querySelector('#btn').onclick = function(){
console.log(11);
draw_canvas_image();
}
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744399017a4572292.html
评论列表（0条）