Neurotic Pink Mongooses

    canvas2clipboard

    1.0.1 • Public • Published

    基于vue的dom复制功能,可以将dom复制为png图片到剪贴板

    • import canvas2clipboard from 'canvas2clipboard'
    • Vue.use(canvas2clipboard)

    demo:

    <div class="png-wrap" ref="pngWrap">
       <img width="600px" :src="require('../assets/shuiku.jpg')" alt="">
    </div>
    <!-- <canvas ref="pngWrap"> ... </canvas> -->
    <button v-canvas2clipboard="copypng()">复制图片</button>
    
    copypng() {
        return {
            target: 'pngWrap',
            scale: 1,
            handler: (param) => {
                console.log(param);
            },
        }
    }
    

    简单实现,主要是提供思路,目前还存在较严重的兼容问题,以后会逐步提代execCommand

    • npm 不允许发布外部依赖项,所以上述 dome 使用 html2canvas 无法直接注入
    • 小伙伴先生成canvas再使用复制

    Install

    npm i canvas2clipboard

    DownloadsWeekly Downloads

    2

    Version

    1.0.1

    License

    ISC

    Unpacked Size

    3.88 kB

    Total Files

    3

    Last publish

    Collaborators

    • vencent