我需要在 JavaScript 中動態創建一個空白占位符影像，直到運行時才知道寬度和高度。
生成的影像應該是完全透明的，尺寸以 PNG 格式給出。
重要的是實際生成的影像本身具有給定的尺寸，僅設定生成的 img 標簽的寬度和高度屬性是不夠的。
我需要這樣的東西：
const createImage = (width, height) => {
const img = new Image()
// img must have width and height in px as specified (see above proviso)
// img must also be a transparent PNG
return img
}
const img1 = createImage(100, 100)
const img2 = createImage(640, 480)
任何想法如何做到這一點？TIA
PS 我知道我可能會找到一個在線服務來為我做這件事，但我想避免 HTTP 呼叫來獲取影像的開銷。
uj5u.com熱心網友回復：
您可以使用 HTML Canvas 并用透明矩形填充它，然后將其轉換為資料 url 并將其附加到 Image 元素。
const createImage = (width, height) => {
const canvas = document.createElement('canvas')
canvas.width = width
canvas.height = height
const ctx = canvas.getContext('2d')
ctx.fillStyle = 'rgba(0, 0, 0, 0)'
ctx.fillRect(0, 0, width, height)
const img = new Image(width, height)
img.src = canvas.toDataURL()
return img
}
const img1El = document.getElementById('img1')
const img2El = document.getElementById('img2')
const img1 = createImage(100, 50)
const img2 = createImage(20, 50)
img1El.src = img1.src
img2El.src = img2.src#img1 {
border: 1px solid red;
}
#img2 {
border: 1px solid blue;
}<img id="img1">
<img id="img2">
<div>Right click an image above and select Save image as...</div>uj5u.com熱心網友回復：
你很接近，影像建構式的第一個和第二個引數是寬度和高度：
const createImage = (width, height) => {
const img = new Image(width, height)
return img
}
const img1 = createImage(100, 100)
const img2 = createImage(640, 480)
document.body.append(img1, img2)
uj5u.com熱心網友回復：
function createImage(width, height) {
let img = document.createElement('img');
img.style.minWidth = `${width}px`;
img.style.minHeight = `${height}px`;
return img;
}
const img1 = createImage(100, 100)
const img2 = createImage(640, 480)
document.body.appendChild(img1)
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/391795.html
標籤：javascript 图片
上一篇：如果下拉串列中的選項具有特定資料屬性，則將類添加到div
下一篇：加載影像時WPFUI性能影響