在画布上绘制图像 - 比真实更大
Posted
技术标签:
【中文标题】在画布上绘制图像 - 比真实更大【英文标题】:Drawing image on canvas - larger than real 【发布时间】:2013-03-25 11:51:28 【问题描述】:我想从画布上的 jpg 文件中绘制图像。 我的代码:
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function()
ctx.drawImage(imageObj, 0, 0);
;
imageObj.src = 'img/my_image.jpg';
问题是画布上的图像比文件中的大得多。为什么?如何绘制真实大小的图像?
更新: 结果:http://jsfiddle.net/AJK2t/
【问题讨论】:
【参考方案1】:工作示例:http://jsfiddle.net/jzF5R/
为了缩放图像,您需要将缩放后的宽度和高度提供给ctx.drawImage()
:
// x, y, width, height
ctx.drawImage(imageObj, 0, 0, 100, 50);
保持原图大小:
ctx.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);
防止画布溢出页面:
ctx.canvas.width = document.body.clientWidth;
您可以轻松地将图像宽度和高度缩放到原始图像的 70%:
ctx.drawImage(imageObj, 0, 0, imageObj.width * 0.7, imageObj.height * 0.7);
【讨论】:
...如果您正在缩放,您可能希望与图像宽度/高度成比例缩放,这样您就不会挤压图像;) ctx.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);不适合我。检查:jsfiddle.net/AJK2t @Alex W:我确定你知道...只是想让 OP 也知道 :) 您的建议会减小图像的比例,但 OP 会因此而丢失像素。正确答案是公认的。 我不知道为什么,但是当我尝试这个时,画布图像的文件大小比原始图像大..无论我尝试了什么..让它变小的唯一方法比原始图像大小..我失去了太多细节,太可怕了......【参考方案2】:这是你的问题:
<canvas style="width: 700px; height: 400px;" id="konf"></canvas>
您正在设置画布的视觉尺寸,而不是像素数。因此,浏览器正在放大画布像素。
最简单的解决方法是:
<canvas id="konf"></canvas>
width
和 height
参数控制画布中的像素数。在没有 CSS 样式的情况下,画布的默认视觉大小也将是这个大小,导致每个屏幕像素一个画布像素(假设您没有缩放 Web 浏览器)。
从my answer to a related question复制/粘贴:
想一想,如果您的 JPG 为 32x32(它总共有 1024 个像素),但通过 CSS 指定它应该 显示为
width:800px; height:16px
,会发生什么情况。同样的事情也适用于 html Canvas:canvas 元素本身的
width
和height
属性决定了您可以在多少像素上绘制。如果不指定canvas元素的高宽,那么per the specs:“width属性默认为300,height属性默认为150。”
width
和height
CSS 属性控制元素在屏幕上显示的大小。如果未设置 CSS 尺寸,则使用元素的固有尺寸进行布局。如果您在 CSS 中指定的尺寸与画布的实际尺寸不同,则浏览器必须根据需要对其进行拉伸和挤压以进行显示。你可以在这里看到一个例子:http://jsfiddle.net/9bheb/5/
【讨论】:
【参考方案3】:要在画布(或其他东西)上显示 MJPEG 流而不用 HTML 定义画布的宽度和高度,所以只使用 CSS 来获得响应式画布并适合页面,我使用它:
//get size from CSS
var sizeWidth = context.canvas.clientWidth;
var sizeHeight = context.canvas.clientHeight;
//here the solution, it replaces HTML
canvas.width = sizeWidth;
canvas.height = sizeHeight;
...........
context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height, 0, 0, sizeWidth, sizeHeight);
无论画布大小如何,图片都完全包含在画布中(不会保留高度和宽度之间的比率,但没关系,css 中的height:auto;
可以解决此问题)。
等等!
【讨论】:
以上是关于在画布上绘制图像 - 比真实更大的主要内容,如果未能解决你的问题,请参考以下文章