I am trying to import an image inside a canvas but the resulting image as the wrong format (canvas and image should be 300x300 px). How to force the canvas ans its image on these sizes?
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) })
set width and height of canvas using this
canvas.width = 300;
canvas.height = 300;
This resolve(canvas.toDataURL()) not work (Cross-domain security error) . When you setup from canvas width and height no need for style. also no need for 'px' just :
canvas.width = '300'
canvas.height = '300'
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) })
As mentioned previously set the canvas size by using:
canvas.width = 300;
canvas.height = 300;
To set the size to 300 x 300 for the imported image call the second drawImage as following:
ctx.drawImage(imgFigure, 40, 130, 300, 300)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.