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

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. 初识docker

    什么是docker Docker 最初是 dotCloud 公司创始人 Solomon Hykes 在法国期间发起的一个公司内部项目,于 2013 年 3 月以 Apache 2.0 授权协议开源,主 ...

  2. .net WCF简单练习

    之前一直没接触过WCF这个东西,由于是初学WCF没有深入研究其原理,只是写了一个demo WCF服务用于两个不同项目中的调用,在这里我举例项目A调用WCF服务实现查询数据功能. 第一步:创建数据库,有 ...

  3. Codeforces Round #436 D. Make a Permutation!

    题意:给你n个数字,其中可能有相同的数字,要求你用其他的数字替换这些相同的数字,使得所得的序列字典序最小. Examples Input 43 2 2 3 Output 21 2 4 3 Input ...

  4. Mongodb 的ORM框架 Morphia之注解

    @Entity("bands") public class Band { @Id ObjectId id; String name; String genre; @Referenc ...

  5. Java框架spring 学习笔记(七):Spring相关概念

    Spring是开源.轻量级.一站式框架. Spring核心主要两部分 aop:面向切面编程,扩展功能不是修改源代码实现. ioc:控制反转,把对象的创建交给Spring进行配置,比如一个类,在类里面有 ...

  6. ToastUtils 工具类

    package com.example.grenaderose.redthunder.utils; import android.content.Context; import android.os. ...

  7. Mysql数据库左外连接,右外连接,模糊查询

    内连接,左外连接,右外连接都是数据库的常用连接与使用手段 内连接 select * from assets_car c inner join category c on a.id = c.id; 左外 ...

  8. airTest 使用体验

    airTest是国内网易自研的一套基于图像识别进行UI自动化测试的框架,目前已经可以支持andriod,ios,web端的UI测试,在google开发者大会上得到了google的高度认可. 最近在学习 ...

  9. XACT_ABORT选项

    XACT_ABORT选项用于指定当SQL语句出现运行时错误时,SQL Server是否自动回滚到当前事务.其语法格式如下所示: SET XACT_ABORT{ON|OFF} 当SET XACT_ABO ...

  10. 47 【golang】mysql操作

    新做了个demo,可以简单了解下mysql的操作:https://github.com/helww/mylab/tree/master/go/mysql