一、使用插件html2canvashttps://github.com/niklasvh/html2canvas

具体代码:

1.html

<div class="test">

      </div>
<img class="down" src="" /> 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

  

H5 dom元素保存为图片的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. H5实现本地预览图片

    我们使用H5可以很容易的实现图片上传前对其进行预览的功能 Html代码如下: <!DOCTYPE html> <html lang="en"> <he ...

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

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

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

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

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

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

随机推荐

  1. PCI 设备调试手段

    Author: Younix Platform: RK3399 OS: Android 6.0 Kernel: 4.4 Version: v2017.04 一PCI 设备调试手段 busybox ls ...

  2. Flash and Scalform CLIK

    Flash shift + f7 打开组件检查面板 Scaleform As bit define bool                Unrolling       :1;    // indi ...

  3. IO密集型 计算密集型

    参考:https://www.cnblogs.com/zhangyux/p/6195860.html 参考:廖雪峰 协程 gevent IO密集型任务指的是磁盘IO或者网络IO占主要的任务,计算量很小 ...

  4. SQLAlchemy中时间格式化及将时间戳转成对应时间的方法-mysql

    https://blog.csdn.net/guoqianqian5812/article/details/80175866 方法很简答,都是借助于mysql数据库提供的函数将时间格式化方法 func ...

  5. Java之旅_高级教程_URL处理

    摘自 :http://www.runoob.com/java/java-url-processing.html Java URL 处理 URL(Uniform Resource Locator)中文名 ...

  6. LoadRunner录制脚本-基础

    1.启动LoadRunner.没有脚本则创建脚本,有脚本则可以运行压力测试 2.点击Create/Edit Scripts,如下图,可新建或打开已有脚本 3.选择要测系统的协议 4.生成脚本分四步 5 ...

  7. 20165336 2017-2018-2《Java程序设计》第6周学习总结

    20165336 2017-2018-2<Java程序设计>第6周学习总结 教材学习内容总结 常量池中的数据在程序运行期间再也不允许改变. String s = new String(&q ...

  8. 要继续看Python写算法的内容请到那里去

    由于在这里发文章的时候.莫名其妙的出现公布出去的问题.客服告知是由于链接或者敏感词. 能不能告诉我哪里出了问题?我能够改动,以便再发. 可是,没有人告诉我.仅仅是告诉我不能发. 另外,能不能公布一下敏 ...

  9. 初试GH-OST(转)

    最近老板让做一个gh-ost和pt-osc 的对比测试,本文将对两者做对比. 一.原理和所用说明   PT-OSC GH-OST 原理 1.创建一个和要执行 alter 操作的表一样的新的空表结构(是 ...

  10. warning: LF will be replaced by CRLF in 解决办法

    今天用Git bash遇到的问题,看了几个回答之后发现一个比较有价值的,给大家分享一下,其他很多的回答都有很或多或少存在一些弊端. 原回答地址在stackoverflow上,附上链接--http:// ...