最近公司要做一个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);//移动
将其移动到相应位置,实不相瞒,这两行代码卡了半天时间。希望对大家有用吧