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生成图片的前一步可以正确识别二维码并跳转。

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

  • 相关阅读:
    mac 程序 Access-JSON-Data
    第一个 mac 程序 Create-JSON-Model
    CATransform3D的m34使用
    超级好用的解析JSON数据的网站
    iOS设计模式
    iOS设计模式
    iOS设计模式
    iOS设计模式
    iOS设计模式
    iOS设计模式
  • 原文地址:https://www.cnblogs.com/simba-lkj/p/8978999.html
Copyright © 2011-2022 走看看