Javascript HTML5 画布：调整图像大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4166645/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 canvas: image resizing
提问by Markus
I'm trying to place an image on a canvas without resizing it. I thought drawImage(img, x, y) would do the trick, but it stretches the image to fill the canvas. Also supplying drawImage(img, x, y, width, height) with the dimensions of my image doesn't seem to work.
我正在尝试将图像放在画布上而不调整其大小。我认为 drawImage(img, x, y) 可以解决问题，但它会拉伸图像以填充画布。还提供带有我的图像尺寸的 drawImage(img, x, y, width, height) 似乎不起作用。
Here's my code:
这是我的代码：
<canvas id="story" style="position:relative; width:800px; height:600px;"></canvas>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("story");
var context = canvas.getContext("2d");
var img = document.getElementById("img1");
var width = parseInt(img.width);
var height = parseInt(img.height);
context.drawImage(img, 0, 0, width, height);
}
</script>
<img id="img1" alt="" src="http://link to image"/>
Thanks in advance!
提前致谢！
PS: I added the parseInt's to make sure that drawImage gets valid values.
PS：我添加了 parseInt 以确保 drawImage 获得有效值。
回答by Trochoid
Don't use CSS to size your canvas. That creates a default sized canvas and stretches it. Set the canvas dimensions directly on it and you'll get a 1 to 1 pixel drawing space.
不要使用 CSS 来调整画布的大小。这将创建一个默认大小的画布并拉伸它。直接在其上设置画布尺寸，您将获得 1 到 1 像素的绘图空间。
<canvas id="story" width="800" height="600" style="position:relative;"></canvas>
回答by Jeff
Trochoid is right, the style attribute on your canvas tag is causing problems. You could set it in the HTML, as he suggests, or better yet you can leave it blank and set it dynamically in the JS:
Trochoid 是对的，画布标签上的 style 属性导致了问题。你可以按照他的建议在 HTML 中设置它，或者更好的是你可以将它留空并在 JS 中动态设置它：
<canvas id="story"></canvas>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("story");
var context = canvas.getContext("2d");
var img = document.getElementById("img1");
var width = parseInt(img.width);
var height = parseInt(img.height);
canvas.height=height;
canvas.width=width;
context.drawImage(img, 0, 0);
}
</script>
<img id="img1" alt="" src="http://link to image"/>
回答by Enrique
Also make sure you get the width and height of the image and draw it AFTER it has been loaded.
还要确保您获得图像的宽度和高度，并在加载后绘制它。
img.onload = function () {
var width = parseInt(img.width);
var height = parseInt(img.height);
context.drawImage(img, 0, 0, width, height);
};
回答by Amarendhar
You have to first load the function image perfectly before rendering on the screen to do that follow the below code..
您必须先完美加载函数图像，然后才能在屏幕上渲染，然后按照以下代码执行此操作。
<img id="demo-img" src="image_name.png">
<br>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3">Your browser does not support the HTML5 canvas tag
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("demo-img");
img.onload=function fun(){ctx.drawImage(img,0,0,img.width,img.height,0,0,img.width,img.height)}
</script>
回答by Ben Van Nimmen
Try using this library I recently created which can load an image, resize it fixed width & height or precentage, convert to and from other formats like base64 or blob, and allows you to apply a watermark.
尝试使用我最近创建的这个库，它可以加载图像，调整其固定宽度和高度或百分比，与其他格式（如 base64 或 blob）相互转换，并允许您应用水印。
var CanvaWork = new CanvaWork();
CanvaWork.loadImage("yourimage.png", function(obj){
console.log(obj.canvas); // The usable canvas
console.log(obj.width);
console.log(obj.height);
console.log(obj.image); // Contains the image file
});
https://github.com/vnbenny/canvawork.js
https://github.com/vnbenny/canvawork.js
Hope this helps you!
希望这对你有帮助！
