如何创建更小的图像

<img id='imgt' src='../img/crop.png' alt='img'>

的imgt原稿尺寸大于960×540
我需要在宽960像素和高度相同的图像 - 汽车。
这是我尝试用帆布：如何创建更小的图像

var c1 = document.createElement("canvas"); 
c1.width = 960; 
var ctx = c1.getContext("2d"); 
var img=document.getElementById("imgt"); 
ctx.drawImage(img, 0, 0, 960, auto);

控制台说 - auto不defined`，但我不知道该用什么作为高度PARAM。

我累不height PARAM：

ctx.drawImage(img, 0, 0, 960);

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': Valid arities are: [3, 5, 9], but 4 arguments provided.

任何帮助吗？

是否有另一种方法可以生成较小的图像，没有画布？

来源

2017-02-21 bonaca

drawImage方法的“height”参数是可选的。你是否尝试过不传递它，或者传递null？ – ADyson

你真的需要在画布上吗？你可以创建另一个''标签，指定不同的高度/宽度属性吗？你想编辑图像，还是只是以不同的方式显示？ – ADyson

@ADyson，是的，我试过了，请看我的更新。我需要下载新图像（960 x自动），所以我需要创建一个新的图像，而不仅仅是显示它。 – bonaca

你可以尝试下面的代码。

var c1 = document.createElement("canvas"); 
c1.width = 960; 
var ctx = c1.getContext("2d"); 
var img=document.getElementById("imgt"); 

var _curWidth = c1.width; 
var _autoHeight = (_curWidth/img.naturalWidth) * img.naturalHeight 

ctx.drawImage(img, 0, 0, _curWidth, _autoHeight);

来源

2017-02-21 10:57:51 spankajd

无论各种'naturalHeight'如何，这都给了我一幅150px的图片。 – bonaca

你给高度图像使用CSS？ – spankajd

不，新图像根本不显示，我有一个代码可以下载它。如果显示它也总是150px高度。也许'c1.height'应该被定义？ – bonaca

如何创建更小的图像

回答

相关问题