zoukankan      html  css  js  c++  java
  • div界面元素生成图片

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

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

    var myUrl = 'http://test.....';
    $(".share_qrcode div.code").qrcode({
        render: "canvas", 
         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生成图片的前一步可以正确识别二维码并跳转。

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

  • 相关阅读:
    推荐一个css抖动库
    八佰
    如何将猫猫监控放在博客上
    一个springboot注解不成功的小问题
    vue整理
    springboot整理
    国外服务器:org.xml.sax.SAXParseException
    记一次tomcat运行起来了但是项目没起来的问题
    一个狗血的mysql编码错误
    js中for(var key in o ){};用法小记
  • 原文地址:https://www.cnblogs.com/simba-lkj/p/8978999.html
Copyright © 2011-2022 走看看