小程序——分享二维码报告

小程序分享报告(图片+二维码):

小程序页面生成图片:请用canvas,页面简单用canvas,页面复杂也用canvas。

踩过的坑: 思路:html  ->  html2canvas  ->  canvas||image/png; 最后涉及到小程序与H5页面项目连接问题(web-view &分享页面),还是用canvas老老实实画的

Bug1:小程序,不支持js获取Dom操作,

解决1:单独写https的一个H5页面来操作Dom。     <web-view  src=‘https:xxxxxx….‘ >  </web-view>会覆盖调分享按钮的btn

Bug2:小程序,不支持 new Image(), 不能自定义定义src,也就不能直接转为canvas或者直接引用分享;

解决2:把图片转为base64,传给后台服务器生成图片。(src=‘banse64‘ 只能显示)。

Bug3:小程序,canvas中图片背景空白,不支持https连接获取,只支持本地缓存或者base64。

解决3:A.wepy框架,使用路径获取(2M大小内);

B. getWXImg(){
             let _this = this;
             wx.getImageInfo({
                 src: ‘https://cdn.xxxxxxxxxx.com/‘+wx.getStorageSync("WxImg"),
                 success (res) {
                     _this.wxImg = res.path;
                     _this.$apply();
                 }
             })
        };

Bug4:报告测试项模板不重置。

解决4:循环赋值前,重置为0,或者原始定义的值;

Bug5:引入二维码||条行码。

//生成二维码

import QR from ‘../../common/qrcode.js‘

createQrCode(url, canvasId, cavW, cavH) {

  wx.showLoading({title: ‘努力生成中...‘})

  //调用插件中的draw方法,绘制二维码图片

  QR.api.draw(url, canvasId, cavW, cavH);

};

最后:

wx.canvasToTempFilePath({});//生成分享图;

wx.saveImageToPhotosAlbum({});//保存到相册,注意:生产环境时 记得这里要加入获取相册授权的代码;

附录

c# base64转译图片保存服务器:

public GeneralResponse Post(ExportImageFromBase64 req)         {

  var resp = new GeneralResponse();

  var path = AppConfig.RootDirectory + "Base64/";

  if (!Directory.Exists(path))             {

    Directory.CreateDirectory(path);

  }

  byte[] stream = Convert.FromBase64String(req.Base64);

  var random = new Random(BabyBusUtilities.Utils.Utilities.GetRandomSeed());

  var imageName = $"Base64{random.Next()}.jpeg";

  using (var imageFile = new FileStream(path + imageName, FileMode.Create))             {

    imageFile.Write(stream, 0, stream.Length);

    imageFile.Flush();

  }

resp.Attach = imageName;

return resp;

}

参考:

小程序中如何将页面生成图片?

基于html2canvas实现网页保存为图片及图片清晰度优化

html2canvas截屏在H5微信移动端踩坑,ios和安卓均可显示

原文地址:https://www.cnblogs.com/yancongyang/p/9798006.html

时间: 2024-10-16 02:46:58

小程序——分享二维码报告的相关文章

.NET开发微信小程序-生成二维码

1.生成小程序二维码功能 直接请求相应的链接.传递相应的参数 以生成商铺的付款码为例: var shopsId = e.ShopsId //付款码的参数 var codeModel = new function () { } codeModel.path = "pages/PageWxPay/PageWxPay?shopsId=" + shopsId codeModel.width = 430 codeModel.auto_color = false codeModel.line_co

微信小程序获取二维码并把logo替换为自己的头像

$avatarUrl = 'http://cms-bucket.nosdn.127.net/2018/05/28/a1a44ffdc2d24f928c1860d4fbf54703.jpeg?imageView&thumbnail=550x0'; $logo = yuanImg($avatarUrl); $QR = createQrCode("pages/me/index", "id=1"); $sharePic = qrcodeWithLogo($QR, $

微信小程序获取二维码(直接上代码)https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=ACCESS_TOKEN

应为是直接返回二进制数据所有与其他接口些许差别,希望能帮助现在的你! 谢谢!!!    /** * 37.微信二维码生成 */ public String getWeiXinCourseMap() { String courseId = StringUtils.defaultString(getPara("courseId")); String codeUrl = ""; String path = "你的二维码指向路径(可以拼接参数)"; tr

微信小程序 生成二维码

效果如下图 需要用到weapp-qrcode.js,下载https://blog-static.cnblogs.com/files/-tiantian/weapp-qrcode.js,点开链接按 ctrl + s 保存到相应的位置 index.wxml中的代码: <view id="container"> <view class="ewm"> <canvas style="width: 600rpx; height: 600r

微信小程序获取二维码API

<%@ WebHandler Language="C#" Class="ce" %> using System; using System.Web; using System.Net; using System.Text; using System.IO; using System.Collections.Generic; using LitJson; using System.Web.Script.Serialization; public class

微信分享二维码

某个业务场景使用微信生成了二维码,临时或是永久的,此时得到的二维码是一个链接. 若需要通过公众号将二维码发送给用户,或者分享二维码,只能分享链接. 如需要分享图片,则需要以下操作: 生成二维码 将二维码图片下载到本地保存. 将二维码与其他图片合成在一起.(可选,可以将logo或者其他广告图片作为背景,将二维码打印上去) 将本地二维码图片作为素材上传到微信服务器. 将二维码发送给用户.

通过数据流处理-微信小程序生成临时二维码

1.小程序请求代码 onLoad: function (options) { var that = this api.Login(function (login) { var codeModel = new function () { } codeModel.scene = login.UserId codeModel.width=430 codeModel.auto_color = false codeModel.line_color = { "r": "0",

Swift中自动生成中间带小头像的二维码

//MARK: -传进去字符串,生成二维码图片 private func creatQRCodeImage(text: String, sizeH:CGFloat) -> UIImage{ //text是二维码要带入的信息,sizeH是二维码的高度 //创建滤镜 let filter = CIFilter(name: "CIQRCodeGenerator")! //还原滤镜的默认属性 filter.setDefaults() //设置需要生成二维码的数据 filter.setVa

有哪些好用的在线工具 小工具 截图 二维码生成 等等 持续更新

二维码生成  http://codeid.xmesm.cn/ 部分效果预览: 原文地址:https://www.cnblogs.com/stillstep/p/11141782.html