npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-2-img

v0.0.6

Published

An easy way to convert HTML sections and charts to JPG, PNG or PDF files

Downloads

163

Readme

Vue2Img

npm vue2

An easy way to convert HTML sections and charts to JPG, PNG or PDF files for download or base64 encoding.

This JS package aims to truthfully and easily convert anything that is rendered in the browser to a raster image for download or base64 encoding somewhere else in your app. It works excellent with chart libraries like HighCharts and other SVG rendered graphics.

Vue2Img wraps html2canvas and jsPDF packages with logic to make common tasks easier so you can focus on your app. Initially conceived to be a VueJS directive, it's made available as a generic JS package that should integrate with any web page.

Feedback is welcome!

Features

  • Take client side screencaps of your web app
  • Bundle many screenshots up as a PDF
  • Processes SVGs and icon font files
  • Snap a screenshot of a single DOM element or the whole page
  • Automatically download an image or PDF file
  • Easy install for VueJS (or any other JS Framework)
  • Runs 100% in the web browser

New as of v0.0.5

  • Copy a single image or PDF to the clipboard (via navigator API)
  • Plays nice with CORS out of the box
  • CSS filter support on <img> elements
  • Return a base64 image, blob, or canvas element
  • Open the PDF or image file in a new window
  • Pass in a callback or use promises to use the image data in your app
  • Returns promises for easy async workflows

Installation

npm install --save vue-2-img

Bundler (Webpack, Rollup)

import Vue2Img from 'vue-2-img'
import 'vue-2-img/dist/vue-2-img.css'

Browser

<!-- Include after Vue -->
<!-- Local files -->
<script src="vue-2-img/dist/vue-2-img.js"></script>
<script src="vue-2-img/dist/vue-2-img.css"></script>

<!-- From CDN -->
<link rel="stylesheet" href="https://unpkg.com/vue-2-img/dist/vue-2-img.css"></link>
<script src="https://unpkg.com/vue-2-img"></script>

Usage

// Single Image
vue2img().image()

// Overide Defaults
let pdfImg = {
    target: 'body',
    captureHiddenClass: 'vti__hidden',
    captureShowClass: 'vti__show',
    captureActiveClass: 'vti__active',
    fileName: 'ImageCapture',
    fileType: 'png',
    returnAction: 'download', // blob, base64, canvas, clipboard, newWindow
    callback: (img) => { return img } // modifies what image is returned
}

// Multipage PDF
vue2img().pdf(pdfConfig)

// Overide Defaults
let pdfConfig = {
      target: 'body',
      pageTarget: '.pageTarget',
      captureHiddenClass: 'vti__hidden',
      captureShowClass: 'vti__show',
      captureActiveClass: 'vti__active',
      title: 'pdfCapture',
      author: 'html-image-capture-service',
      maxItems: 50,
      fileNameSuffix: getDate(),
      pageWrapper: '.row',
      padding: 5,
      devStyle: false,
      pageHeight: null, // 612 for letter
      pageWidth: null, // 792 for letter
      pageUnits: 'pt',
      returnAction: 'download' // blob, base64, clipboard, newWindow
}
vue2img().pdf(pdfConfig)

License

MIT