小程序分享报告(图片+二维码):
小程序页面生成图片:请用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