проблема с изменением размера изображения на холсте

Question

проблема с изменением размера изображения на холсте

1

Я пытаюсь импортировать изображение внутри холста, но результирующее изображение как неправильный формат (холст и изображение должны быть 300x300 пикселей). Как заставить холст и его изображение на этих размерах?

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)
    })

GibboK 03 нояб. 2017, в 09:29

Источник

1

Возможная копия размера изображения не соответствует размеру холста
Patrick Roberts 03 нояб. 2017, в 08:21

Теги:

javascript

html5

canvas

3 ответа

0

Это решение (canvas.toDataURL()) не работает (ошибка безопасности междоменного доступа). Когда вы устанавливаете ширину и высоту холста, вам не нужен стиль. также нет необходимости в "px":

    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)
    })

Nikola Lukic 03 нояб. 2017, в 06:15

0

Как уже упоминалось ранее, размер холста задается с помощью:

canvas.width = 300;
canvas.height = 300;

Чтобы установить размер 300 x 300 для импортированного изображения, вызовите второй drawImage следующим образом:

ctx.drawImage(imgFigure, 40, 130, 300, 300)

Julian Hilbers 03 нояб. 2017, в 05:34

Ещё вопросы

Возможная копия размера изображения не соответствует размеру холста

Durga · Accepted Answer · 2017-11-03T05-35-00.000Z

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.width = 300;
canvas.height = 300;