vue3实现二维码的创建生成dataURL和直接显示

vue3生成二维码的方式有很多种，因为项目要求，本次实现二维码主要是通过转化成dataURL的base64位数据进行解析展示。查阅了多种资料，根据要求的不同，如果想要二维码直接展示也会有相应的标签。

   //判断图片
if (block.type === 'image') {
      const image = new Image()
      image.src = block.src
      image.onload = () => {
        block.image = image
      }
    }else if (block.type === 'qrcode'){//判断二维码，转二维码dataURL
      QRCode.toDataURL(block.text, {width: block.width, height: block.height}).then(src=> {
        const image = new Image()
        image.src = src
        image.onload = () => {
          block.image = image
        }
      })

在npm中查询到一种简单的方法直接实现二维码的转码，不管是图片还是二维码都可以轻松实现转成base64位格式的文件。

显示的方式和block的格式如下：

//显示方式
<v-image v-else-if="item.type === 'qrcode'" :config="item"
                   @dragmove="onMove($event, item)"
                   @mousedown="handleStageMouseDown($event, item)"
                   @transform="handleTransformEnd"
                   @transformend="handleTransformEnd"></v-image>
//块状数据封装
const newQrcode = (index = 0) => ({
    "index": ++index,
    "type": "qrcode",
    "name": "二维码",
    "text": "二维码信息",
    "x": 0,//canvas横纵坐标的参数
    "y": 0,//横纵坐标的参数
    "draggable": true,
    "rotation": 0,
    "fill": "#FFFFFF",
    "align": "left",
    "verticalAlign": "top",
    "width": 30,
    "height": 30,
    "scaleX": 1,
    "scaleY": 1
})

效果：点击即可在画布上生成二维码