longpress-save2img-h5 v1.0.0

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