使用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 相关文章推荐
CSS3中Color的一些特性介绍
May 27 HTML / CSS
一款纯css3实现的响应式导航
Oct 31 HTML / CSS
css3实现超炫风车特效
Nov 12 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 HTML / CSS
html5+css3之制作header实例与更新
Dec 21 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
Jun 04 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 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
php新浪微博登录接口用法实例
2014/12/23 PHP
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
Jquery Easyui日历组件Calender使用详解(23)
2016/12/18 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
python显示生日是星期几的方法
2015/05/27 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
Python扩展内置类型详解
2018/03/26 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
Python使用gRPC传输协议教程
2018/10/16 Python
python使用正则筛选信用卡
2019/01/27 Python
pandas 时间格式转换的实现
2019/07/06 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
学习委员自我鉴定
2014/01/13 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
五四青年节的活动方案
2014/08/20 职场文书
十佳党员事迹材料
2014/08/28 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
党员先进事迹材料
2014/12/19 职场文书
社区服务活动报告
2015/02/05 职场文书
自荐信范文
2019/05/20 职场文书
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server