使用 drawImage() 在 canvas 上输出固定大小的图像?
Using drawImage() to output fixed size images on a canvas?
如何使用 drawImage()
在 300px X 380px
canvas 上输出完整尺寸的图像而不考虑源图像的大小?
示例:
1). 如果有 75px X 95px
的图像,我希望能够绘制它以适应 300px X 380px
canvas .
2). 如果有 1500px X 1900px
的图像,我希望能够绘制它以适应 300px X 380px
canvas .
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("myPic");
ctx.drawImage(img,10,10);
有哪些选项可以防止任何质量损失?
您需要调整源图像的大小。您将需要计算图像的目标大小,然后在绘制过程中使用几个额外的参数。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 188;
var y = 30;
var width = 200;
var height = 137;
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, x, y, width, height);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
</script>
</body>
</html>
来源:http://www.html5canvastutorials.com/tutorials/html5-canvas-image-size/
缩放图像以适应并不难,只需使用简单的纵横比和尺寸:
var ratioX = canvas.width / image.naturalWidth;
var ratioY = canvas.height / image.naturalHeight;
var ratio = Math.min(ratioX, ratioY);
ctx.drawImage(image, 0, 0, image.naturalWidth * ratio, image.naturalHeight * ratio);
保持质量; canvas 的 300x380 在打印时要么显得非常小,要么非常模糊。
在 target 分辨率中保留数据很重要。为此,请使用目标 DPI(或 PPI)计算大小。您还需要提前知道 300x380 区域代表的尺寸(例如,英寸、厘米、毫米等)。
例如:
如果目标 PDF 的 PPI 为 300,并且 canvas 表示 3 x 3.8 厘米(只是为了简单起见),则以像素为单位的宽度和高度将为:
var w = (3 / 2.54) * 300; // cm -> inch x PPI
var h = (3.8 / 2.54) * 300;
在 canvas' 位图上使用此尺寸,然后使用 CSS:
缩小 元素
canvas.width = w|0; // actual bitmap size, |0 cuts fractions
canvas.height = h|0;
canvas.style.width = "300px"; // size in pixel for screen use
canvas.style.height = "380px";
您现在可以直接使用 canvas 作为 PDF 的图像源,同时保持 PDF 的打印质量(不过请记住,上传的小图像在任何情况下都不会提供高打印质量)。
当然,先设置 canvas 大小,然后使用顶部的代码绘制图像。
如何使用 drawImage()
在 300px X 380px
canvas 上输出完整尺寸的图像而不考虑源图像的大小?
示例:
1). 如果有 75px X 95px
的图像,我希望能够绘制它以适应 300px X 380px
canvas .
2). 如果有 1500px X 1900px
的图像,我希望能够绘制它以适应 300px X 380px
canvas .
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("myPic");
ctx.drawImage(img,10,10);
有哪些选项可以防止任何质量损失?
您需要调整源图像的大小。您将需要计算图像的目标大小,然后在绘制过程中使用几个额外的参数。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 188;
var y = 30;
var width = 200;
var height = 137;
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, x, y, width, height);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
</script>
</body>
</html>
来源:http://www.html5canvastutorials.com/tutorials/html5-canvas-image-size/
缩放图像以适应并不难,只需使用简单的纵横比和尺寸:
var ratioX = canvas.width / image.naturalWidth;
var ratioY = canvas.height / image.naturalHeight;
var ratio = Math.min(ratioX, ratioY);
ctx.drawImage(image, 0, 0, image.naturalWidth * ratio, image.naturalHeight * ratio);
保持质量; canvas 的 300x380 在打印时要么显得非常小,要么非常模糊。
在 target 分辨率中保留数据很重要。为此,请使用目标 DPI(或 PPI)计算大小。您还需要提前知道 300x380 区域代表的尺寸(例如,英寸、厘米、毫米等)。
例如:
如果目标 PDF 的 PPI 为 300,并且 canvas 表示 3 x 3.8 厘米(只是为了简单起见),则以像素为单位的宽度和高度将为:
var w = (3 / 2.54) * 300; // cm -> inch x PPI
var h = (3.8 / 2.54) * 300;
在 canvas' 位图上使用此尺寸,然后使用 CSS:
缩小 元素canvas.width = w|0; // actual bitmap size, |0 cuts fractions
canvas.height = h|0;
canvas.style.width = "300px"; // size in pixel for screen use
canvas.style.height = "380px";
您现在可以直接使用 canvas 作为 PDF 的图像源,同时保持 PDF 的打印质量(不过请记住,上传的小图像在任何情况下都不会提供高打印质量)。
当然,先设置 canvas 大小,然后使用顶部的代码绘制图像。