在《著作权归作者所有，禁止商业用途转载。将SVG保存为图片[译]本文作者：唐霜，转载请注明出处。》一文中介绍了一种将svg保存为图片保存【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】到本地的一种方案。但是这篇文章里面，还存【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】在一个问题，它使用了a标签的downlo本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】ad属性。这个属性并不能支持版本较低（9著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。）的IE。本文更进一层，不仅导出svg，【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。连html也可以导出保存的方案。

import html2canvas from 'html2canvas'
import download from 'downloadjs'
export default class Html2Image {
    static canvas(el, options, factory) {
        if(typeof el === 'string') {
            el = document.querySelector(el)
        }
        let type = options.type || 'png'
        let filename = (options.name || 'download') + '.' + type
        let filetype = 'image/' + type
        options.width = options.width || el.offsetWidth
        options.height = options.height || el.offsetHeight
        options.onrendered = canvas => {
            factory(canvas, filename, filetype)
        }
        html2canvas(el, options)
        return this
    }
    static base64(el, options, factory) {
        this.canvas(el, options, (canvas, filename, filetype) => {
            let dataurl = canvas.toDataURL(filetype)
            factory(dataurl, filename, filetype)
        })
    }
    static blob(el, options, factory) {
        this.canvas(el, options, (canvas, filename, filetype) => {
            canvas.toBlob(blob => factory(blob, filename, filetype), 'image/' + filetype, 1)
        })
    }
    static save(el, options) {
        this.base64(el, options, download)
        return this
    }
}

使用方法：【原创不易，请尊重版权】

import Html2Image from './html2image'
Html2Image.save('#container', {
  name: 'my-image',
  type: 'jpg',
})

就是这么简单。我们使用到了两个包html著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。2canvas和downloadjs，你【版权所有，侵权必究】【作者：唐霜】需要用npm去安装它们。使用compon【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。er对它进行预览，直接在我的github【转载请注明来源】上拿源码。未经授权，禁止复制转载。

Html2Image还提供了blob, 【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。base64等方法，你可以根据你自己的需【未经授权禁止转载】本文作者：唐霜，转载请注明出处。要来选择使用哪一个方法。

2017-05-19 5491