一、使用插件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. cordova 内部API 用ssl https,报错

    环境:node6.10.1 cordova 6.x, ionic 2.2.1 用cordova/ionic 建立的app我们的api 地址要用https,做了安全加密之后,按照正常的流程,打包,然后跑 ...

  2. ssm,dubbo框架搭建得配置文件

    在建立了parent,common,manager(pojo,mapper,sercie,web)的maven工程后,开始导入添加配置文件: pojo,mapper 最终会打成jar包,service ...

  3. Apache Common Math Stat

    http://commons.apache.org/proper/commons-math/userguide/stat.html mark   DescriptiveStatistics maint ...

  4. LeetCode 942 DI String Match 解题报告

    题目要求 Given a string S that only contains "I" (increase) or "D" (decrease), let N ...

  5. UOJ244 短路 贪心

    正解:贪心 解题报告: 传送门! 贪心真的都是些神仙题,,,以我的脑子可能是不存在自己想出解这种事情了QAQ 然后直接港这道题解法趴,,, 首先因为这个是对称的,所以显然的是可以画一条斜右上的对角线, ...

  6. linux 循环读取文件的每一行

    在Linux中有很多方法逐行读取一个文件的方法,其中最常用的就是下面的脚本里的方法,而且是效率最高,使用最多的方法.为了给大家一个直观的感受,我们将通过生成一个大的文件的方式来检验各种方法的执行效率. ...

  7. html多文件上传,可支持预览

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. springmvc拦截器实现用户登录权限验证

    实现用户登录权限验证 先看一下我的项目的目录,我是在intellij idea 上开发的 1.先创建一个User类 package cn.lzc.po; public class User { pri ...

  9. java多线程和.net多线程区别与联系

    在网上搜了好多,没有搜到这方面的内容,自己浅薄写点吧. 1..net和java的主线程和子线程,原理是类似的 (1).当子线程是前台线程时,主线程结束,子线程并未结束(还将继续运行,即进程未结束) ( ...

  10. wx 文件编辑框

    # -*- coding: utf- -*- import wx import os class my_frame(wx.Frame): """This is a sim ...