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.导 ...
随机推荐
- 手眼标定之相机随动eye-in-hand 示例:handeye_movingcam_calibration
* * This example explains how to use the hand eye calibration for the case where* the camera is atta ...
- php 安装最新的redis连接扩展
用于与redis连接的Php扩展[RC表示公测,我们用的是不带RC的稳定版本]下载包地址:http://pecl.php.net/package/redis 最新稳定版本:4.3.0 下载包:# wg ...
- pandas进行条件格式化以及线性回归的预测
条件格式化 需求1: 将三次考试的成绩小于60分的值找出来,并将字体变为红色 需求2: 将每次考试的第一名找出来,将背景变为绿色 需求3: 使用背景颜色的深浅来表示数值的大小 需求4: 使用数据条的长 ...
- vue2.0的初始化
vue2.0的初始化,使用 webpack构建工具生成的项目 直接上代码 main.js文件 // The Vue build version to load with the `import` co ...
- Alfred 3 如何设置默认搜索引擎(以百度搜索为例)
前提条件: Alfred 3 已经安装在MAC中 首先要有破解的Alfred 3 安装在MAC PRO中,然后进入到以下栏目:Features-->web Search-->Add Cus ...
- I/O系统(二)
程序查询流程1测试指令,查询IO设备是否就绪.2传送指令,当已经就绪时,执行传送功能.3转移指令,未就绪时,转移至继续测试IO设备的状态.当需要启动某一IO设备时,必须将该程序插入到现行程序中.1,由 ...
- js给页面添加回车监测事件,实现回车登录功能
document.body.addEventListener('keyup', function (e) { ') { $("#btn_login").click(); } }) ...
- flutter Dialog里ListView的问题
showDialog( context: context, builder: (ctx) { return // Dialog( // child: Container( // padding: Ed ...
- pom.xml文件释义
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- web配置详细解释
<?xml version="1.0"?> <!--注意: 除了手动编辑此文件以外,您还可以使用 Web 管理工具来配置应用程序的设置.可以使用 Visual S ...