如何創建更小的圖像

<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

如何創建更小的圖像

回答

相關問題