2015-07-10 78 views
4

我正在将图像绘制到画布上,当这样做时,即使图像的大小与画布的大小相同,图像也会缩小到画布上(这会导致画布质量下降),这是因为img做得很好缩小实际上具有更大自然高度和自然宽度的实际img。我知道有可能使这种质量更好的方法,但是我不需要实际向用户展示这幅画布/不需要缩小比例。因此,我想知道是否有任何方法可以绘制比屏幕更大的图像并将其保持在某个位置?听说某人在某处提到了一个盒子对象或一个相机对象,但却无法真正使用这些信息。是否可以绘制比当前屏幕更大的画布?

问题,是否可以绘制比屏幕更大的画布?在那种情况下如何?

这是代码即时通讯与ATM

var image = document.getElementById('insertedImg'); 
var height = $("#insertedImg").height(); 
var width = $("#insertedImg").width(); 
var c=document.getElementById("canvass"); 
var ctx=c.getContext("2d"); 
c.height=height; 
c.width=width; 
ctx.drawImage(image,0,0,width,height); 
+0

你有没有试过把'c.height'和'c.weight'设置为120%这样的东西?这将使它更大 – Bikas

+0

我也可以使它更大但不会比屏幕更大,我想仍然将图像naturalHeight和naturalWidth绘制到画布或其他东西,并且无需显示它,以便它不会缩小或裁剪这现在发生了 – mattias

+0

为什么你不想把它放在屏幕上时将图像绘制到画布上? –

回答

2

工作使用的屏幕外的画布,你只需要创建一个新的画布,并设置其高度和宽度相应。然后你可以将它附加到一个元素或者将图像作为base64字符串或任何你需要的输出。

//canvas is not visible unless appended to a DOM element 
var canvas = document.createElement('canvas'); 
canvas.width = $("#insertedImg").height(); 
canvas.height = $("#insertedImg").width(); 
var ctx = canvas.getContext('2d'); 

//do the drawing, etc. 
ctx.drawImage(...); 

//export the image 
var img = canvas.toDataURL("image/png"); 
+0

接受,因为这一个和http://stackoverflow.com/questions/934012/get-image-data-in-javascript一起把我解决这个正确的道路上 – mattias

相关问题