h5页面在微信内置浏览器打开下载功能，页面截屏HTML2canvas使用

最近公司要做一个h5的小程序，要求是基于微信打开，要求可以分享微信卡片给朋友。同时要下载服务器上的文件，还要指定区域图片自动截屏保存。
首先微信卡片分享是通过wx.config()这个api来实现，这里需要后端配合，获取后端的signature也就是验签。在调用wx.config()来实现
我们这里是需要下载一个压缩包，压缩包里面是一堆图片，直接上a标签，结果是在pc端微信浏览器可以正常下载，在ios端浏览器也可以下载，但是android端就提示，打开网页浏览器进行下载（大概是这么个意思）。这个功能最终没能做出来百度完了之后看到微信社区里的回答，最终选择更换方案，在下载页面提供下载地址，要求用户通过网址打开浏览器进行下载。（下载文件有大佬成功的还请教教我）
然后是生成图片进行保存，我这里是要求保存弹窗里的图片，当然这个图片是底图，还要再底图上加上相应文字后进行保存。一查网上都是用html2canvas进行截图保存的。一通copy加创作，发现截屏是成功了，但是很模糊。清晰度差的一塌糊涂。没办法接着找。最终找到了另一位大神的操作，使用html2canvas结合canvas2Image来处理的

let dom = $('.contain')
  
  var canvas = document.createElement('canvas');
  canvas.width = width * scaleBy;
  canvas.height = height * scaleBy;
  console.log(canvas)
  canvas.style.width = width * scaleBy + 'px';
  canvas.style.height = height * scaleBy + 'px';
  canvas.style.position = 'absolute';

  var context = canvas.getContext('2d');
  context.scale(scaleBy, scaleBy);

  var shareContent = document.getElementById("pic"); //获取囊括所有元素的最大的div元素
  var width = shareContent.offsetWidth; //获取dom宽度（包括元素宽度、内边距和边框，不包括外边距）
  var height = shareContent.offsetHeight;
  var canvas = document.createElement("canvas"); //创建一个canvas标签元素
  var scale = 2; //定义放大倍数，可以支持小数
  var imgType = "image/jpg";//设置默认下载的图片格式

  canvas.width = width * scale; //定义canvas宽度 * 倍数（图片的清晰度优化），默认宽度为300px
  canvas.height = height * scale; //定义canvas高度 * 倍数，默认高度为150px
  // var fontSize=$("html").css("font-size").split("px")[0];
  let actHeight = document.body.clientHeight
  console.log(actHeight)
  var context = canvas.getContext('2d');
  context.scale(scale, scale);
  //创建canvas的context对象，设
  var aaaa = 0;//距离左侧距离
  var bbbb = actHeight / 100 * 23.3;//距离顶部距离
  context.translate(-aaaa, -bbbb);//移动
  // context.shadowOffsetX = "150px"
  // console.log(context)
  var opts = { //初始化对象
    scale: 1, //添加的scale参数
    canvas: canvas, //自定义canvas
    logging: true, //日志开关，便于查看html2canvas的内部执行流程
    width: width, //dom的原始宽度和高度
    height: height,
    useCORS: true //开启html2canvas的useCORS配置，跨域配置，以解决图片跨域的问题
  };
  html2canvas(shareContent, opts).then(function (canvas) {
    console.log(canvas)
    var context = canvas.getContext('2d');
    // 【重要】关闭抗锯齿，进一步优化清晰度
    context.mozImageSmoothingEnabled = false;
    context.webkitImageSmoothingEnabled = false;
    context.msImageSmoothingEnabled = false;
    context.imageSmoothingEnabled = false;

    var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height, imgType); //将绘制好的画布转换为img标签,默认图片格式为PNG.
    document.getElementsByClassName("pic")[0].appendChild(img); //在body元素后追加的图片元素至页
    $(img).attr("id", "product");

  });

生成操作就是这么来的，我这边是保存图片，通过微信的长按保存，当然生成图片定位在原有图片的上方，进行了opacity:0处理，长安图片区域其实是按在我生成的图片上面，保存的自然是我要的生成的那张了。canvasj截图保存时其实默认是从页面顶部开始，刚开始截的是我要的一半，后来通过

 var bbbb = actHeight / 100 * 23.3;//距离顶部距离
  context.translate(-aaaa, -bbbb);//移动

将其移动到相应位置，实不相瞒，这两行代码卡了半天时间。希望对大家有用吧