小程序之 保存canvas生成商品图片附加小程序二维码 分享到朋友圈
发布日期:2021-05-10 03:43:31 浏览次数:6 分类:技术文章

本文共 7878 字,大约阅读时间需要 26 分钟。

小程序之 保存canvas生成商品图片附加小程序二维码 分享到朋友圈

一、概述

需要用到的生成二维码组件(可自行下载添加到小程序根目录utils里):

以上二维码组件默认是有空白边的的,如果不需要空白区域,也可以修改draw方法(如需要修改请进:)

二、需求分析:

效果图是750*1140大小的PSD效果图,如下:(点击可查看大图)

在这里插入图片描述
我的思路:

在小程序中先创建三个canvas:

第一个是画二维码;

第二个是画与PSD相同大小的画布可用于保存到手机,样做的原因是单位不需要变,图片,文字,等 位置和大小就可以完全按PSD的尺寸了,不需要去计算;

第三个是最后用来显示效果的(其实就是将第二个再重新画到这个新的画布上面大小就按缩放比例显示)。

多走了很多弯路:开始效果是实现了(画与画布相同大小canvas是需要去计算很多的比如文字大小与位置,图片的大小与位置,起始坐标,都是要去计算的)。但是canvas尺寸太小,保存的时候也就屏幕那么大,不得不得新想办法。

JD的小程序也保存的分享的图片相当大(2550px4002px),不知道是不是用canvas画的还是后台生成的。我现在保存的大小与PSD(7501140)大小一样。不会太小也不会太大。

现实代码

WXML代码:

js代码:

var QR = require("../../utils/qrcode.js");Page({
data: {
}, onLoad: function (options) {
console.log("页面加载事件"); var that = this; wx.getSystemInfo({
success: function (res) {
that.setData({
scrollWidth: res.windowWidth, scrollHeight: res.windowHeight, savewidth:750,//保存的图片宽 saveheight: 1140,//保存的图片高 }); //console.log(crentwidth, crentheight); } }); let shareurl="https://youdomain.com/b?id=8559"; QR.api.draw(shareurl, "mycanvas", 300, 300); var ctx1 = wx.createCanvasContext("mycanvas"); var leftwidth = 30;//两边间距 var imgwidth = 750 - leftwidth * 2; console.log(imgwidth); //生成分享商品图片 避免二维码还没生成,等个三秒钟再开始画 setTimeout(function () {
wx.showLoading({
title: "生成中......", }) wx.canvasToTempFilePath({
canvasId: "mycanvas", success: function (res) {
var ctx = wx.createCanvasContext("mycanvas2"); ctx.drawImage(res.tempFilePath, 0, 330, 100, 100); ctx.beginPath(); ctx.setFillStyle("white") ctx.rect(0, 0, that.data.savewidth, that.data.saveheight); ctx.setFillStyle("#fff"); ctx.fill(); console.log("画标题"); ctx.setFontSize(32); ctx.setFillStyle("#333"); var chr = "汽车鲨鱼腮仿真出风口侧风口引擎盖装饰进风口假风口车贴改装用品"; var temp = ""; //截取文只显示一行 for (var a = 0; a < chr.length; a++) {
if (ctx.measureText(temp+"......").width < imgwidth) {
temp += chr[a]; } else {
break; } } var titlevtop = 60;//标题距顶部高度 ctx.fillText(temp + "...", leftwidth, titlevtop); ctx.setFontSize(36); ctx.setFillStyle("#e51a1c"); var pricevtop = 115;//价格距顶部高度 ctx.fillText("¥1.00", leftwidth, pricevtop); wx.getImageInfo({
src: "https://youdomain.com/upload/20170214/s201702140521515718.jpg", success: (res) => {
var vtop = 156;//产品图距离顶部位置 // 向画布上绘制图像 ctx.drawImage(res.path, leftwidth, vtop, imgwidth, imgwidth); // 返回之前保存过的路径状态和属性 ctx.restore(); //画二维码 wx.canvasToTempFilePath({
canvasId: "mycanvas", success: function (res) {
var vtop2 = 876;//二维码距顶部位置 var ewmwidth = 232;//二维码的宽高 ctx.drawImage(res.tempFilePath, leftwidth - 2, vtop2, ewmwidth, ewmwidth); //画LOGO wx.getImageInfo({
src: "https://youdomain.com/images/logo.png", success: (res) => {
console.log("给二维码添加logo:"); var logowidth = 73;//logo宽高 ctx.drawImage(res.path, leftwidth+ ewmwidth / 2 - logowidth / 2, vtop2 + ewmwidth/2 - logowidth / 2, logowidth, logowidth); var vtop3 = 970;//文字距顶部的高度 ctx.setFontSize(36); ctx.setFillStyle("#333"); ctx.fillText("百易商小程序", leftwidth + ewmwidth + logowidth, vtop3); var vtop4 = 1020;//文字距顶部的高度 ctx.setFontSize(26); ctx.setFillStyle("#999"); ctx.fillText("长按或扫一扫识别小程序", leftwidth + ewmwidth + logowidth, vtop4); //ctx.save(); ctx.draw(); //ctx.save(); console.log("大图生成完"); setTimeout(function(){
var radius = that.data.savewidth / that.data.saveheight;//原大小比率 var crentheight = parseInt((that.data.scrollWidth / radius).toFixed(0));//当前屏幕比例的高 var x = that.data.scrollWidth / that.data.savewidth;//宽缩小比例 var y = crentheight / that.data.saveheight;//高缩小比例 var ncrentwidth = that.data.scrollWidth;//屏幕的宽 that.setData({
x: x, y: y, ncrentwidth: ncrentwidth, ncrentheight: crentheight }); wx.canvasToTempFilePath({
canvasId: "mycanvas2", success: function (res) {
console.log(res); var ctx3 = wx.createCanvasContext("mycanvas3"); ctx3.scale(x, y); ctx3.beginPath(); ctx3.drawImage(res.tempFilePath, 0, 0, that.data.savewidth,that.data.saveheight); ctx3.draw(); ctx3.save(); console.log("缩略图生成成功,显示!") wx.showToast({
title: "生成完成!", }) setTimeout(function () {
wx.hideLoading(); }, 1000) } }); },100) } }) } }); } }) }, fail:function(res){
console.log(res); } }); }, 3000) }, //点击保存分享图片 previewImg2: function (e) {
wx.showActionSheet({
itemList: ["保存图片"], success: function (res) {
console.log(res.tapIndex) if (res.tapIndex == 0) {
console.log("保存图片") wx.canvasToTempFilePath({
canvasId: "mycanvas2", success: function (res) {
var tempFilePath = encodeURI(res.tempFilePath) console.log(res) wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath, success: function success(res) {
console.log("saved::" + res.savedFilePath); wx.showToast({
title: "保存成功", }) } }) }, fail: function (res) {
console.log(res); wx.showToast({
title: "保存失败", icon: "loading" }), setTimeout(function () {
wx.hideLoading() }, 2000) } }); } }, fail: function (res) {
console.log(res.errMsg) } }) }});

特别说明:

1、wx.getImageInfo使用时图片必须是:downloadFile 合法域名才能画出来,不然会报错。

2、二维码生成后扫描或识别需要登录 小程序公众平台,在《设置中》->《开发设置》->《扫普通链接二维码打开小程序》中开通二维码 并添加相应规则

添加规则如下:

在这里插入图片描述
详情页面获取方式:

if (typeof (options.q) != "undefined") {
var getq = decodeURIComponent(options.q).replace("https://yourdomain.com/b?id=","");//替换规则后,获取的就是商品ID //从图片识别或扫一扫接收的参数 that.setData({
id: getq })}else{
//默认接收参数 that.setData({
id: options.id })}

转载地址:https://blog.csdn.net/qsj0606/article/details/116006094 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Js阻止事件冒泡与阻止默认事件
下一篇:小程序识别带多个参数二维码进入商品详情

发表评论

最新留言

留言是一种美德,欢迎回访!
[***.207.175.100]2023年12月02日 18时22分06秒