首先明确一下需求,界面上截取部分元素,生成图片,用户可以长按保存。主要是在微信里,所以设计到生成二维码的问题。

1、链接生成二维码,这里用qrcode生成,搜索可以搜到相关的js文件

var myUrl = 'http://test.....';
$(".share_qrcode div.code").qrcode({
render: "canvas",
width: 120, //设置宽高
height: 120,
text: myUrl //url地址
});

2、选取部分代码生成canvas,将canvas转换为图片

var ele = document.getElementById("tacitGrade"); //选取的元素
html2canvas($("#tacitGrade")[0]).then(function(canvas) {
  document.getElementById("canvas").appendChild(canvas); //生成canvas
  var imgSrc = $("#canvas canvas")[0].toDataURL("image/png"); //canvas生成图片
  $("#img").attr('src', imgSrc);
});

3、测试了一下,可以保存图片,二维码页可以加载出来,

这里存在一个问题是在微信里 在生成的图片并没有保存时直接长按识别二维码,不能识别,但是只是界面元素,即在canvas生成图片的前一步可以正确识别二维码并跳转。

解决方案是生成图片并设置透明度,即扫描时的二维码是当之前的图片,长按保存的图片是生成后的整体图片。

div界面元素生成图片的更多相关文章

  1. 利用canvas将网页元素生成图片并保存在本地

    利用canvas将网页元素生成图片并保存在本地 首先引入三个文件: 1.<script type="text/javascript" src="js/html2ca ...

  2. selenium界面元素定位

    一.        Selenium界面元素定位 本文元素定位以das2为例 #导入包 from selenium import  webdriver #打开火狐驱动 driver=webdriver ...

  3. 在DevExpress程序中使用内置的图标构建美观的界面元素

    在我们一般的程序中,为一般的界面元素添加一定的图标展示,有助于提升界面的整体的美观.结合排版布局,以及固定场景的图标,往往给用户非常好的直观感受:统一.美观.易理解.因此在一般的程序界面中,都尽量在略 ...

  4. 表现层的设计(二)——MVC如何处理复杂的界面元素

    需求描述 一个比较复杂的页面,界面中包含的元素数据来自于许多个有关联或者无关联的表,然后我们要做的就是将数据呈现在界面上. 10年前大概都是这么干的 直接写一个复杂的SQL语句,返回一个包含所需数据的 ...

  5. JAVA IDE IntelliJ IDEA使用简介(一)—之界面元素

    (注:简介基于IDEA的版本为:11.0,下载地址:http://www.jetbrains.com/idea/) 打开IDEA,(当第一次打开的时候出现的是一个欢迎页面,随便创建一个project来 ...

  6. 给div设置background-color: rgba(0, 0, 0, 0.2)属性,并加了css3动画--opacity动画淡出动画,之后div子元素的字体会抖一下

    问题:给div设置background-color: rgba(0, 0, 0, 0.2)属性,并加了css3动画--opacity动画淡出动画,之后div子元素的字体会抖一下: 解决:animati ...

  7. Ajax编程中,经常要能动态的改变界面元素的样式

    在Ajax编程中,经常要能动态的改变界面元素的样式,可以通过对象的style属性来改变,比如要改变背景色为红色,可以这样写:element.style.backgroundColor=”#ff0000 ...

  8. 免费素材:25套免费的 Web UI 设计的界面元素(转)

    Web 元素是任何网站相关项目都需要的,质量和良好设计的元素对于设计师来说就像宝贝一样.如果您正在为您的网站,博客,Web 应用程序或移动应用程序寻找完美设计的网页元素,那么下面这个列表会是你需要的. ...

  9. 最好的JAVA IDE IntelliJ IDEA使用简介(一)—之界面元素

    打开IDEA,(当第一次打开的时候出现的是一个欢迎页面,随便创建一个project来进入到IDEA的主界面),主界面显示如下: 主界面由6个主要区域组成(图中红色数字标注的) 1.菜单和工具栏 2.导 ...

随机推荐

  1. 保存chrome书签中链接顺序的小技巧

    长期以来,我的chrome浏览器书签总是不能自主排序,用书签管理器排序之后,不关闭chrome是好的,一旦关闭重开,又会恢复成原先的排序,实在很诧异,手动修改Bookmars文件也不行. 我们知道,如 ...

  2. Spring的诞生

    前言:不先学习常见的设计模式直接看Spring.MyBatis等源码,简直就是一个找虐的过程!不掌握Servlet原理.基本的Tomcat容器技术上来就看Spring MVC源码同样也是一个打击自信心 ...

  3. 微信小程序 project.config.json 配置

    可以在项目根目录使用 project.config.json 文件对项目进行配置. miniprogramRoot Path String 指定小程序源码的目录(需为相对路径) qcloudRoot ...

  4. RPC web service

    ---------------------------------------------------------------------------------------------------- ...

  5. 关于activity的一点总结(一)

    关于activity的重点: 参考网址:https://blog.csdn.net/qq_26787115/article/details/52556842 一.activity生命周期. 二..启动 ...

  6. 红黑树(red-black tree)实现记录

    https://github.com/xieqing/red-black-tree A Red-black Tree Implementation In C There are several cho ...

  7. Django继承AbstractUser新建UserInfor Model时出现fields.E304错误

    错误详情: SystemCheckError: System check identified some issues: ERRORS:app01.UserInfo.groups: (fields.E ...

  8. 百度ueditor的图片上传,前后端交互使用

    百度ueditor的使用 一个文本编辑器,看了网上很多文档写的很乱,这里拾人牙慧,整理下怎么使用. 这个东西如果不涉及到图片附件上传,其实很简单,就是几个前端文件,直接引用,然后配置下ueditor. ...

  9. My_SQ主键,外键

    1.default ;设置默认参数,且不能更改. 2.not null  ;传参数时不能为空. 3.unique  ;在该列不能value 不能重复. 4.primary key  ;设置主键,不能含 ...

  10. Centos 7下网卡bonding配置之mode4

    一.bonding技术 bonding(绑定)是一种linux系统下的网卡绑定技术,可以把服务器上n个物理网卡在系统内部抽象(绑定)成一个逻辑上的网卡,能够提升网络吞吐量.实现网络冗余.负载等功能,有 ...