longpress-save2img-h5

longPressSave2Img

• 支持多实例将一个页面中多个dom长按保存为图片
• 从开始触摸屏幕touchstart 到 结束触摸屏幕 touchend 连续 700ms 视为长按；
• 底层使用了 html2canvas 实现dom 转 canvas；

并不是所有的页面元素都可以进行转换的，下面是不支持的情况：

• 不支持 iframe
• 不支持跨域图片（可以先将线上图片转换成 base64，然后用 base64 作为图片路径）
• 不支持 flash
• 不支持 transform、transition 过渡、animation 动画（备注：transform 初始布局是可以的,但是不能参与动画类的操作）

安装

npm i longpress-save2img-h5

使用

import LongPressSave2Img from 'longpress-save2img-h5'

const el = document.querySelector('#box1')
const long1 = new LongPressSave2Img(el, () => {
  const r = window.confirm("要保存为图片吗？");
  if(r === true){
    long1.htmlToCanvas({ ext: 'jpeg' }, ({ flag, data }) => {
      if (flag) {
        console.log("base64编码数据1：", data);
        const a = document.createElement('a')
        a.href = data
        a.download = 'base64编码数据1'
        a.click()
      }
    })
  }
})

const el2 = document.querySelector('#box2')
const long2 = new LongPressSave2Img(el2, () => {
  const r = window.confirm("要保存为图片吗？");
  if(r === true){
    long2.htmlToCanvas({}, ({ flag, data }) => {
      if (flag) {
        console.log("base64编码数据2：", data);
        const a = document.createElement('a')
        a.href = data
        a.download = 'base64编码数据2'
        a.click()
      }
    })
  }
})

API

Props

htmlToCanvas

属性	说明	类型	默认值	可选值
mime	canvas.toDataURL(type, encoderOptions) 中的type 图片格式 toDataURL	String	image/png	image/jpg、image/jpeg、image/webp
encoderOptions	canvas.toDataURL(type, encoderOptions) 中的encoderOptions 在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。toDataURL	Number	0.92
html2canvas参数	请参考 http://html2canvas.hertzen.com/