vue如何动态的创建出一张白色的图片？

Question

vue如何动态的根据宽高创建出一张白色的base64的图片
现在项目里面是网上找的一张白色图直接使用的url地址
想动态的创建出一张白色的图片，可以是base64的也可以是其它格式的
只有src可以识别就行
有什么好的方法吗？

Answer 1

const genWhiteImage = (width, height) => {
  const canvas = document.createElement('canvas')
  Object.assign(canvas, { width, height })
  const ctx = canvas.getContext('2d')
  ctx.fillStyle = 'white'
  ctx.fillRect(0, 0, width, height)
  return canvas.toDataURL()
}

genWhiteImage(100, 100)
// data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAWtJREFUeF7t1cEJADAMw8B2/6Fd6BT3UCYQEiZ3207HGLgFYVp8kIJYPQqC9ShIQTQDGE8/pCCYAQynhRQEM4DhtJCCYAYwnBZSEMwAhtNCCoIZwHBaSEEwAxhOCykIZgDDaSEFwQxgOC2kIJgBDKeFFAQzgOG0kIJgBjCcFlIQzACG00IKghnAcFpIQTADGE4LKQhmAMNpIQXBDGA4LaQgmAEMp4UUBDOA4bSQgmAGMJwWUhDMAIbTQgqCGcBwWkhBMAMYTgspCGYAw2khBcEMYDgtpCCYAQynhRQEM4DhtJCCYAYwnBZSEMwAhtNCCoIZwHBaSEEwAxhOCykIZgDDaSEFwQxgOC2kIJgBDKeFFAQzgOG0kIJgBjCcFlIQzACG00IKghnAcFpIQTADGE4LKQhmAMNpIQXBDGA4LaQgmAEMp4UUBDOA4bSQgmAGMJwWUhDMAIbTQgqCGcBwWkhBMAMYTgspCGYAw3mmPo7k6LH8eAAAAABJRU5ErkJggg==

Answer 2

生成 SVG 格式的很容易了

function createImg(w,h){
    return `data:image/svg+xml,%3Csvg width='${w}' height='${h}' viewBox='0 0 1 1' preserveAspectRatio='none' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M0 0h1v1H0z'/%3E%3C/svg%3E`
}

注意：里面有个属性 preserveAspectRatio='none' 表示强制拉伸，可以参考这篇文章：https://segmentfault.com/a/11...

下面是生成 200 * 100 的

Answer 3

canvas

但是我想不出你这样用的意图。css 的 background 不行吗？