使用html2canvas将页面转成图并使用用canvas2image下载


Posted in HTML / CSS onApril 04, 2019

之前在网上找到一个用 <a> 的 download属性下载的方法,确实很简单也很方便,但此方法不支持IE,无奈又找到另一方法。

使用html2canvas将页面转成图,用canvas2image下载

本例使用的版本:

  • html2canvas@1.0.0-alpha.12
  • canvas2image@1.0.5

安装

npm install html2canvas canvas2image --save

引入

import html2canvas from 'html2canvas';
require('./canvas2image.js');

canvas2image.js 需要改动一下,以便绑在window上

(function($){
    Canvas2Image = function () {
    ...
    }
}

_dataURL 可以用来回显,Canvas2Image.saveAsPNG(canvas) 会直接下载。

Canvas2Image提供了下面几种方法:

Canvas2Image.saveAsImage(canvasObj, width, height, type)
Canvas2Image.saveAsPNG(canvasObj, width, height)
Canvas2Image.saveAsJPEG(canvasObj, width, height)
Canvas2Image.saveAsGIF(canvasObj, width, height)
Canvas2Image.saveAsBMP(canvasObj, width, height)

Canvas2Image.convertToImage(canvasObj, width, height, type)
Canvas2Image.convertToPNG(canvasObj, width, height)
Canvas2Image.convertToJPEG(canvasObj, width, height)
Canvas2Image.convertToGIF(canvasObj, width, height)
Canvas2Image.convertToBMP(canvasObj, width, height)

在vue中可以用$refs 确定DOM;

backgroundColor: null,此句可使转出的图没有白边

methods: {
            toImage() {
                let _this = this;
                html2canvas(this.$refs.index,{
                    backgroundColor: null
                }).then((canvas) => {
                    let _dataURL = canvas.toDataURL("image/png");                    
                    // _this.dataURL = _dataURL;
                    Canvas2Image.saveAsPNG(canvas)
                });
            },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。   

HTML / CSS 相关文章推荐
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 HTML / CSS
纯css实现照片墙3D效果的示例代码
Nov 13 HTML / CSS
详解CSS3新增的背景属性
Dec 25 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
Apr 10 #HTML / CSS
canvas画布实现手写签名效果的示例代码
Apr 23 #HTML / CSS
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
Apr 26 #HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 #HTML / CSS
Html5实现单张、多张图片上传功能
Apr 28 #HTML / CSS
鲜为人知的HTML5语音合成功能
May 17 #HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 #HTML / CSS
You might like
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
提高php编程效率技巧
2015/08/13 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
用Python解决计数原理问题的方法
2016/08/04 Python
Python 迭代器与生成器实例详解
2017/05/18 Python
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
django Admin文档生成器使用详解
2019/07/22 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
Python list运算操作代码实例解析
2020/01/20 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
历史学专业个人的自我评价
2013/10/13 职场文书
员工年终演讲稿
2014/01/03 职场文书
学员自我鉴定
2014/03/19 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
超市开店计划书
2014/09/15 职场文书
学校安全管理制度
2015/08/06 职场文书
初中政治教学反思
2016/02/23 职场文书
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android