div界面元素生成图片
首先明确一下需求,界面上截取部分元素,生成图片,用户可以长按保存。主要是在微信里,所以设计到生成二维码的问题。
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界面元素生成图片的更多相关文章
- 利用canvas将网页元素生成图片并保存在本地
利用canvas将网页元素生成图片并保存在本地 首先引入三个文件: 1.<script type="text/javascript" src="js/html2ca ...
- selenium界面元素定位
一. Selenium界面元素定位 本文元素定位以das2为例 #导入包 from selenium import webdriver #打开火狐驱动 driver=webdriver ...
- 在DevExpress程序中使用内置的图标构建美观的界面元素
在我们一般的程序中,为一般的界面元素添加一定的图标展示,有助于提升界面的整体的美观.结合排版布局,以及固定场景的图标,往往给用户非常好的直观感受:统一.美观.易理解.因此在一般的程序界面中,都尽量在略 ...
- 表现层的设计(二)——MVC如何处理复杂的界面元素
需求描述 一个比较复杂的页面,界面中包含的元素数据来自于许多个有关联或者无关联的表,然后我们要做的就是将数据呈现在界面上. 10年前大概都是这么干的 直接写一个复杂的SQL语句,返回一个包含所需数据的 ...
- JAVA IDE IntelliJ IDEA使用简介(一)—之界面元素
(注:简介基于IDEA的版本为:11.0,下载地址:http://www.jetbrains.com/idea/) 打开IDEA,(当第一次打开的时候出现的是一个欢迎页面,随便创建一个project来 ...
- 给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 ...
- Ajax编程中,经常要能动态的改变界面元素的样式
在Ajax编程中,经常要能动态的改变界面元素的样式,可以通过对象的style属性来改变,比如要改变背景色为红色,可以这样写:element.style.backgroundColor=”#ff0000 ...
- 免费素材:25套免费的 Web UI 设计的界面元素(转)
Web 元素是任何网站相关项目都需要的,质量和良好设计的元素对于设计师来说就像宝贝一样.如果您正在为您的网站,博客,Web 应用程序或移动应用程序寻找完美设计的网页元素,那么下面这个列表会是你需要的. ...
- 最好的JAVA IDE IntelliJ IDEA使用简介(一)—之界面元素
打开IDEA,(当第一次打开的时候出现的是一个欢迎页面,随便创建一个project来进入到IDEA的主界面),主界面显示如下: 主界面由6个主要区域组成(图中红色数字标注的) 1.菜单和工具栏 2.导 ...
随机推荐
- 保存chrome书签中链接顺序的小技巧
长期以来,我的chrome浏览器书签总是不能自主排序,用书签管理器排序之后,不关闭chrome是好的,一旦关闭重开,又会恢复成原先的排序,实在很诧异,手动修改Bookmars文件也不行. 我们知道,如 ...
- Spring的诞生
前言:不先学习常见的设计模式直接看Spring.MyBatis等源码,简直就是一个找虐的过程!不掌握Servlet原理.基本的Tomcat容器技术上来就看Spring MVC源码同样也是一个打击自信心 ...
- 微信小程序 project.config.json 配置
可以在项目根目录使用 project.config.json 文件对项目进行配置. miniprogramRoot Path String 指定小程序源码的目录(需为相对路径) qcloudRoot ...
- RPC web service
---------------------------------------------------------------------------------------------------- ...
- 关于activity的一点总结(一)
关于activity的重点: 参考网址:https://blog.csdn.net/qq_26787115/article/details/52556842 一.activity生命周期. 二..启动 ...
- 红黑树(red-black tree)实现记录
https://github.com/xieqing/red-black-tree A Red-black Tree Implementation In C There are several cho ...
- Django继承AbstractUser新建UserInfor Model时出现fields.E304错误
错误详情: SystemCheckError: System check identified some issues: ERRORS:app01.UserInfo.groups: (fields.E ...
- 百度ueditor的图片上传,前后端交互使用
百度ueditor的使用 一个文本编辑器,看了网上很多文档写的很乱,这里拾人牙慧,整理下怎么使用. 这个东西如果不涉及到图片附件上传,其实很简单,就是几个前端文件,直接引用,然后配置下ueditor. ...
- My_SQ主键,外键
1.default ;设置默认参数,且不能更改. 2.not null ;传参数时不能为空. 3.unique ;在该列不能value 不能重复. 4.primary key ;设置主键,不能含 ...
- Centos 7下网卡bonding配置之mode4
一.bonding技术 bonding(绑定)是一种linux系统下的网卡绑定技术,可以把服务器上n个物理网卡在系统内部抽象(绑定)成一个逻辑上的网卡,能够提升网络吞吐量.实现网络冗余.负载等功能,有 ...