img-ui

跟图像有关的组件

安装

npm install @h5plus/img-ui --save
# or
yarn add @h5plus/img-ui

使用

QR(二维码组件)

// in xxx.vue文件
import { qr } from '@h5plus/img-ui'
export default {
  ...
  components: {
    qr
  },
  ...
}

或者

// in entry.js
import { qr } from '@h5plus/img-ui'
Vue.use(qr)

<qr
  value="Hello world!"
  :size="300"
  level="H"
  bgColor="#FFFFFF"
  fgColor="#000000"
  type="img"
  style="text-align: right; padding-right: 5px;"
></qr>

html2img(html 元素保存为图片)

import { html2img } from '@h5plus/img-ui'
export default {
  ...
  methods: {
    plusMode: function(s) {
      // 设备html5+模式下（需要引用"@h5plus/core"包才行，如果项目已经引用了就忽略）,直接保存到系统相册了
      // 简洁参数(dom元素)
      html2img(document.getElementById('main'))
      // 完整参数(3个参数)
      // dom元素：需要转换为图片的dom,必填,dom类型
      // 图片名称：保存后图片名称,仅在设备模式下需要,默认值:'已保存图片到相册中',非必填,string类型
      // 提示文字：保存成功的提示文字,仅在设备模式下需要,默认值:'_img_' + Date.parse(new Date()) + '.jpg',非必填,string类型
      html2img(document.getElementById('main'),'img_' + Date.parse(new Date()) + '.jpg','已保存图片到相册中')
    },
    htmlMode: function(s) {
      // 非设备模式下，
      html2img(document.getElementById('main')).then(function(canvas) {
         document.body.appendChild(canvas)
      })
    }
  }
  ...
}