html5 保存图片,H5 dom元素保存为图片

具体代码：

1.html

2.js

//创建一个新的canvas

var canvas2 = document.createElement("canvas");

let _canvas = document.querySelector('.test');

var w = parseInt(window.getComputedStyle(_canvas).width);

var h = parseInt(window.getComputedStyle(_canvas).height);

//将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了

canvas2.width = w * 2.2;

canvas2.height = h * 2.2;

canvas2.style.width = w + "px";

canvas2.style.height = h + "px";

//可以按照自己的需求，对context的参数修改,translate指的是偏移量

// var context = canvas.getContext("2d");

// context.translate(0,0);

var context = canvas2.getContext("2d");

context.scale(2,2);

html2canvas(document.querySelector('.test'),{

canvas:canvas2

}).then(function(canvas) {

document.body.appendChild(canvas);

document.querySelector('canvas').style.display = "none"

//canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载

document.querySelector(".down").setAttribute('src',canvas.toDataURL());

document.querySelector(".test" ).style.display = "none";

});

二、使用dom-to-image

npm下载：https://www.npmjs.com/package/dom-to-image

用MVVM模式开发中遇到的零散问题总结(5)——将动态加载的可视元素保存为图片的控件，Binding刷新的时机

原文:用MVVM模式开发中遇到的零散问题总结(5)--将动态加载的可视元素保存为图片的控件,Binding刷新的时机 在项目开发中经常会遇到这样一种情况,就是需要将用户填写的信息排版到一张表单中,供打 ...

M3: 将页面元素制作为图片

本小节将介绍如何将页面元素保存为图片,在前一小节中,我们加入了名称为gridMsg的Grid Control,现在我们将使用RenderTargetBitmap把gridMsg这个页面元素保存为一张图 ...

html2canvas 把h5网页保存为图片 区域保存

html2canvas 把h5网页保存为图片 想把一个网页得某些元素,绘制成图片保存,有些数据是接口动态加载的,所以不能UI给到图片,需要我们把api的数据也绘制到图片上 html2canvas这个插 ...

useRef获取DOM元素和保存变量(十)

useRef在工作中虽然用的不多,但是也不能缺少.它有两个主要的作用: 用useRef获取React JSX中的DOM元素,获取后你就可以控制DOM的任何东西了.但是一般不建议这样来作,React界面 ...

html2canvas - 微信中长按存图 - 将h5活动结果保存到本地

现在有很多在微信里流行的h5活动页.这些小h5大部分都是简单的交互然后得出一个abcd早就拟定好的结果,根据你的选项分几种情况,最终得到其中一个作为你测试的答案.比如这个就是最后那张结果图: 当时自己 ...

H5实现本地预览图片

我们使用H5可以很容易的实现图片上传前对其进行预览的功能 Html代码如下:

基于html2canvas实现网页保存为图片及图片清晰度优化

一.实现HTML页面保存为图片 1.1 已知可行方案 现有已知能够实现网页保存为图片的方案包括: 方案1:将DOM改写为canvas,然后利用canvas的toDataURL方法实现将DOM输出为包含 ...

将HTML元素转换成图片供用户下载(html2canvas + canvas2Image)

这是项目中遇到的一个问题,起初觉得把一个html元素生成图片,提供给用户下载的需求挺容易实现的,毕竟看过一些截图的插件,但是在真正操作中遇到了各种各样的问题,比如移动端上截图显示不清晰,html元素中 ...

JQuery利用sort对DOM元素进行排序

前言 排序对于我们是再熟悉不过了,在绝大数应用程序中都会有这样一个场景:当我们从服务器端获取一个列表时,在界面上进行渲染,我们可以会依赖于某一个规则来进行排序,当然此时绝大多数会再次与服务器进行交互来 ...

随机推荐

B树、B-树、B+树、B*树---转载

B树 即二叉搜索树: 1.所有非叶子结点至多拥有两个儿子(Left和Right): 2.所有结点存储一个关键字: 3.非叶子结点的左指针指向小于其关键字的子树,右指针指向大于其关键字的子树: 如: B ...

《JAVASCRIPT高级程序设计》原生拖放和媒体元素

一.原生拖放 最早在网页中引入javascript拖放功能的是IE4,当时,网页中只有两种对象可以拖放:图像和某些文本.而现在,几乎网页中的任何元素都可以拖放以及作为放置目标.下面介绍一些与拖放相关的 ...

记一次mybatis bindingexception 问题排查

看到的错误信息如出一辙都是这样的:Method threw 'org.apache.ibatis.binding.BindingException' exception.Invalid bound s ...

VS中批量删除注释

批量删除: 按ctrl+H 选上正则表达式 Find what: //.* Replace with: (空) 点replace all就行了

K8S学习心得 == 创建容器influxdb的RC和SVC

附上:YAML在线检查:http://nodeca.github.io/js-yaml Part 1: 部署Influxdb的RC文件,步骤如下: step 1: influxdb-rc.yaml文件 ...

【week11】psp

本周psp 项目 内容 开始时间 结束时间 被打断 净时间 11.26(星期六)  看论文 psiBlast  9:00 12:00  5  175    11.28(星期一)  做作业 设计模式作业 ...

Python基础(8) - 模块

Python 模块的物理形式就是文件:一个文件对应一个模块.文件名就是模块名+.py 模块定义了自己独有的命名空间.在其定义的属性,函数,类都隶属于该空间. 通过import关键字我们可以导入模块: ...

apache Subversion 直接支持LDAP域群组

如果你的Subversion已经用apache的ldap支持用户认证功能,你是否常常在想,既然都用ldap支持认证,为什么不直接支持域群组, 反而在authz文件里面一个一个的手工定义,或者有人用脚本 ...

WebSocket简单介绍(WebSocket JavaScript 接口)(2)

上一节介绍了 WebSocket 规范,其中主要介绍了 WebSocket 的握手协议.握手协议通常是我们在构建 WebSocket 服务器端的实现和提供浏览器的WebSocket 支持时需要考虑的问 ...

ThreadLocalRandom原理

原文链接:https://www.jianshu.com/p/9c2198586f9b 2.2. 并发包中ThreadLocalRandom类原理剖析 ThreadLocalRandom类是JDK7在 ...