我试图在 Canvas 中导入图像,但生成的图像格式错误( Canvas 和图像应为 300x300 像素)。 如何强制 Canvas 及其图像达到这些尺寸?
const createImage = (articleNumber, description, name, dateCreated, src) =>
new Promise(resolve => {
const canvas = document.createElement('canvas')
canvas.style.width = '300px'
canvas.style.height = '300px'
// canvas.style.display = 'none'
document.body.appendChild(canvas)
const ctx = canvas.getContext('2d')
const imgBase = new Image()
imgBase.src = 'http://makepixelart.com/pixelpixapp/celebs/kirk.PNG'
imgBase.onload = () => {
ctx.drawImage(imgBase, 0, 0, 300, 300)
ctx.fillStyle = '#000000'
ctx.font = 'bold 50px Arial'
ctx.fillText(articleNumber, 475, 225)
ctx.fillText(description, 475, 380)
ctx.fillText(name, 475, 495)
ctx.fillText(dateCreated, 475, 610)
const imgFigure = new Image()
imgFigure.src = src
imgFigure.onload = () => {
ctx.drawImage(imgFigure, 40, 130, 390, 470)
resolve(canvas.toDataURL())
}
}
})
createImage('xyz', 'desc', 'name item', '20170101', 'https://i.pinimg.com/736x/3e/23/92/3e2392ecff7d230cc8ae82e462f2a690--pixel-art-templates-change-background.jpg').then(base64 => {
console.log(base64)
})
最佳答案
const createImage = (articleNumber, description, name, dateCreated, src) =>
new Promise(resolve => {
const canvas = document.createElement('canvas')
canvas.width = 300;
canvas.height = 300;
// canvas.style.display = 'none'
document.body.appendChild(canvas)
const ctx = canvas.getContext('2d')
const imgBase = new Image()
imgBase.src = 'http://makepixelart.com/pixelpixapp/celebs/kirk.PNG'
imgBase.onload = () => {
ctx.drawImage(imgBase, 0, 0, 300, 300)
ctx.fillStyle = '#000000'
ctx.font = 'bold 50px Arial'
ctx.fillText(articleNumber, 475, 225)
ctx.fillText(description, 475, 380)
ctx.fillText(name, 475, 495)
ctx.fillText(dateCreated, 475, 610)
const imgFigure = new Image()
imgFigure.src = src
imgFigure.onload = () => {
ctx.drawImage(imgFigure, 40, 130, 390, 470)
resolve(canvas.toDataURL())
}
}
})
createImage('xyz', 'desc', 'name item', '20170101', 'https://i.pinimg.com/736x/3e/23/92/3e2392ecff7d230cc8ae82e462f2a690--pixel-art-templates-change-background.jpg').then(base64 => {
console.log(base64)
})
使用此设置 Canvas 的宽度和高度
canvas.width = 300;
canvas.height = 300;
关于javascript - 调整 Canvas 上图像大小的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47090839/