html2canvas
最近公司有个需求,实现html 页面元素转为png图像,这边用了html2canvas来实现.,这里记录一下,避免以后忘了~~
官网链接: http://html2canvas.hertzen.com/
npm安装
npm install --save html2canvas
或者下载文件引入
上图右击另存为
html:
js
一些简单配置:
})
useCROS:是否允许跨域;
logging:日志打印;
返回的canvas 可以直接添加到页面上进行预览,也可以 转成base64给后台 imgUrl
一些问题:
要截取的页面若有图片,需要把图片转成base64形式
下面是例子:
function getBase64Image(imgurl) {
var img = new Image();
img.src = imgurl;
img.setAttribute('crossOrigin', 'anonymous');
img.onload=function(){
var canvas = document.createElement("canvas");
canvas.width = 300;//这个设置不能丢,否者会成为canvas默认的300*150的大小
canvas.height = 300;//这个设置不能丢,否者会成为canvas默认的300*150的大小
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, 300, 300);
var dataURL = canvas.toDataURL("image/png");
console.log(dataURL)
$("#img").attr("src",dataURL);
html2img();
}
}
我在项目里是做了一个上传图片预览的功能,就不需要进行这一步了。
这里简单的使用就讲完了,朋友们可以多多补充一下。
html2canvas的更多相关文章
- 使用html2canvas实现浏览器截图
最近做项目为了解决全局异常信息记录,研究了一下浏览器全屏截图功能,方便用户发现异常时能够快速截图发给管理员.最终记录的异常信息如下,上面的[截图报告管理员]就是使用html2canvas前端插件实现的 ...
- java使用代理 html2canvas 截屏 将页面内容生成图片
1.html2canvas 生成图片简单又好用,但涉及到跨域就会出现问题,官方给出的解决办法是设置代理.基本原理就是在后端将图片的数据生成base64再返回给前端使用.使canvas画布分析元素的时候 ...
- 使用html2canvas实现批量生成条形码
/*前台代码*/ <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Generat ...
- 使用html2canvas实现网页截图并嵌入到PDF
以前我们只能通过截图工具进行截取图像.这使得在业务生产中,变得越来越不方便.目前的浏览器功能越来越强大,H5也逐渐普及,浏览器也可以实现截图了.这里来聊下之前在工作中用到的html2canvas.这里 ...
- html2canvas插件对整个网页或者网页某一部分截图并保存为图片
html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏.这个脚本将当前页面渲染成一个canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现.它不需要来自服务器任何渲染,整 ...
- html2canvas根据DOM元素样式实现网页截图
html2canvas是一个相当不错的JavaScript类库,它使用了html5和css3的一些新功能特性,实现了在客户端对网页进行截图的功 能.html2canvas通过获取页面的DOM和元素的样 ...
- IText&Html2canvas js截图 绘制 导出PDF
Html2canvas JS截图 HTML <div id="divPDF"> 需要截图的区域 </div> JS <script src=" ...
- html2canvas 踩坑总结
需求:将html表格导出为图片,表格可以自己编辑数据,并适配各种屏幕大小.上网搜了下,找到了html2canvas,一开始使用的是最新版0.5.0,最终因为需要支持自定义div编辑框自动换行选择了v0 ...
- html2canvas 网页截图 下载 上传
利用html2canvas插件 对网页截图 并下载和上传图片. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//E ...
- html2canvas页面截图图片不显示
前两天在一个群里,有人问使用html2canvas屏幕截图的时候为什么页面的图片不显示只显示了文字,我没有做过屏幕截图的需求,所以不是很清楚,今天稍稍测试了一下. 在github上将html2canv ...
随机推荐
- #20175120彭宇辰 java第四周总结
教材学习内容总结 -第五章 子类与继承 子类的定义-class 子类名 extends 父类名ps:-任何类都是object的子类-每个类有且仅有一个父类,多个或0个子类 同一包里的继承性-除了pri ...
- PHP 打开已有图片进行编辑
<?php header("content-type:image/jpeg");//表明请求页面的内容是jpeg格式的图像 即当前页面会以图片的新式展示 去掉这行就可以显示正 ...
- lucas 模板 洛古模板题
#include<bits/stdc++.h> #define int long long using namespace std; ; int a[maxn]; int quick(in ...
- linux的基本操作2
/dev/ha[a-d] IDE硬盘(过时了)/dev/sd[a-p] U盘,scsi,sata,ssd硬盘(流行)/dev/cdrom 光盘 CD-ROM/dev/mouse 鼠标 fdisk ...
- PythonStudy——Pycharm 小技巧
分享Pycharm中一些不为人知的技巧 工欲善其事必先利其器,Pycharm 是最受欢迎的Python开发工具,它提供的功能非常强大,是构建大型项目的理想工具之一,如果能挖掘出里面实用技巧,能带来事半 ...
- 什么是pytorch(2Autograd:自动求导)(翻译)
Autograd: 自动求导 pyTorch里神经网络能够训练就是靠autograd包.我们来看下这个包,然后我们使用它来训练我们的第一个神经网络. autograd 包提供了对张量的所有运算自动求导 ...
- 内置---排序(sorted)
# li = [1,23,4,5,6,6,7]# res = sorted(li,reverse=True) #反转后,从小到大 默认从大到小 #res = sorted(li) # print(re ...
- linux下C语言多线程编程实例
用一个实例.来学习linux下C语言多线程编程实例. 代码目的:通过创建两个线程来实现对一个数的递加.代码: //包含的头文件 #include <pthread.h> #include ...
- DHCP的搭建
挂载光盘 yum –y install dhcp cat /etc/dhcp/dhcpd.conf 配置文件到 /usr/share/doc/dhcp*/dhcpd.conf.sample 这是dhc ...
- python 前后端分离 简单的数据库返回接口
1.使用node http-server 起本地服务器 或者打开nginx 直接用nginx的默认页面也可以 (用下面的html文件替换nginx下html文件夹下的index.html) http ...