Taro开发小程序记录-海报生成
站长
· 阅读数 4
Taro开发小程序记录-海报生成
| 文档创建人 | 创建日期 | 文档内容 | 更新时间 |
|---|---|---|---|
| adsionli | 2023-06-14 | Taro小程序开发相关记录-海报生成 | 2023-06-14 |
在公司开发的第一个项目是一个简单的Taro小程序项目，主要应用的则是微信小程序，由于是第一次使用Taro，所以在开发过程中遇到的一些问题和一些开发技巧，记录一下，方便以后进行查看，也与大家进行分享。
自定义海报
说到自定义海报可以说是很多小程序中都会进行开发的内容，比如需要进行二维码的保存，然后再对二维码进行一点文字的修饰，涉及到这方面的时候我们就需要使用canvas了。
在实际开发的过程中，遇到了一些很坑的问题，当我们需要使用离屏canvas来进行绘制时，我们可能就会遇到问题(我自己就遇到了)。
对于安卓端，我们可以正常的使用OffscreenCanvas来创建离屏canvas，然后绘制相关内容，最后在使用Taro.canvasToTempFilePath方法保存到临时文件下，Taro.canvasToTempFilePath方法会返回文件路径，我们就可以通过获取到的文件路径来进行下载。
下面是安卓端的一个🌰，大家有需要也可以直接拿去使用
- 需要使用到的方法
/**
* @description 获取二维码图像
*/
export const qrCodeImage = async (qrCodeValue: string, size: number = 128) => {
/* NOTE: 通过创建离屏canvas承载code */
const context = createOffscreenCanvas('2d', size, size);
QRCode.toCanvas(context, qrCodeValue, { width: size, height: size, margin: 1 });
return (context as unknown as HTMLCanvasElement).toDataURL();
};
/**
* @description 创建离屏canvas对象，width与height单位为px
*/
export const createOffscreenCanvas = (type: '2d' | 'webgl', width: number = 100, height: number = 100) => {
return Taro.createOffscreenCanvas({ type, width, height });
};
/**
* @description 将传入的图片url转换成一个ImageElement对象
*/
export const loadImageByUrlToCanvasImageData = async (url: string, width: number = 100, height: number = 100) => {
const context = createOffscreenCanvas('2d', width, height);
const imageElement = context.createImage();
await new Promise(resolve => {
imageElement.onload = resolve;
imageElement.src = url;
});
return imageElement;
};
/**
* @description 将canvas转成图片文件并保存在临时路径下
*/
export const changeCanvasToImageFileAndSaveToTempFilePath = async (options: Taro.canvasToTempFilePath.Option) => {
const successCallback = await Taro.canvasToTempFilePath(options);
return successCallback.tempFilePath;
};
interface SettingOptions {
title: string;
titleInfo: {
dx: number;
dy: number;
color?: string;
font?: string;
};
imageUrl: string;
imagePos: {
dx: number;
dy: number;
};
width: number;
height: number;
}
/**
* @description 获取二维码图像并设置标题
*/
export const generateQrCodeWithTitle = async (option: SettingOptions): Promise<string> => {
const {
title,
titleInfo,
imageUrl,
imagePos,
width,
height,
} = option;
const context = await createOffscreenCanvas('2d', width, height);
const ctx = (context.getContext('2d') as CanvasRenderingContext2D);
const imgElement: any = await loadImageByUrlToCanvasImageData(imageUrl, width, height);
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = titleInfo.color || 'black';
ctx.font = titleInfo.font || '';
ctx.textAlign = 'center';
ctx.fillText(title, titleInfo.dx || 0, titleInfo.dy || 0);
ctx.drawImage(imgElement, imagePos.dx, imagePos.dy);
const filePath = await changeCanvasToImageFileAndSaveToTempFilePath({
canvas: (context as Canvas),
width,
height,
fileType: 'png',
destWidth: width,
destHeight: height,
});
return filePath;
};
/**
* @description 保存图片
*/
export const saveImage = async (urls: string[], isLocal: boolean = true) => {
let filePath = urls;
if (!isLocal) {
filePath = await netImageToLocal(urls);
}
await Promise.all(filePath.map(path => {
return Taro.saveImageToPhotosAlbum({ filePath: path });
}));
return true;
};
/**
* @description 加载在线图片，并返回临时图片文件地址
*/
export const netImageToLocal = async (urls: string[]) => {
const res = await Promise.all(urls.map((url:string) => {
return Taro.downloadFile({ url });
}));
const result = res.map(data => {
if (data.statusCode === 200) {
return data.tempFilePath;
}
throw new Error(data.errMsg);
});
return result;
};
/**
* @description 判断用户是否授权保存图片
*/
export const checkHasAuthorizedSaveImagePermissions = async () => {
const setting = await Taro.getSetting();
const { authSetting } = setting;
return authSetting['scope.writePhotosAlbum'];
};
/**
* @description 下载图片,需要区分是本地图片还是在线图片
*/
export const downloadImage = async (urls: string[], isLocal: boolean = true) => {
const hasSaveImagePermissions = await checkHasAuthorizedSaveImagePermissions();
if (hasSaveImagePermissions === undefined) {
// NOTE: 用户未授权情况下，进行用户授权，允许保存图片
await Taro.authorize({ scope: 'scope.writePhotosAlbum' });
return await saveImage(urls, isLocal);
} else if (typeof hasSaveImagePermissions === 'boolean' && !hasSaveImagePermissions) {
return new Promise((resolve, reject) => {
Taro.showModal({
title: '是否授权保存到相册',
content: '需要获取您的保存图片权限，请确认授权，否则图片将无法保存到相册',
success: (result) => {
if (result.confirm) {
Taro.openSetting({
success: async (data) => {
if (data.authSetting['scope.writePhotosAlbum']) {
showLoadingModal('正在保存...');
resolve(await saveImage(urls, isLocal));
}
},
});
} else {
reject(new Error('未授予保存权限'));
}
},
});
});
}
await saveImage(urls, isLocal);
return true;
};
-
生成海报（二维码+标题头）
/** * @description 获取二维码图像并设置标题 */ export const generateQrCodeWithTitle = async (option: SettingOptions): Promise<string> => { const { title, titleInfo, imageUrl, imagePos, width, height, } = option; const context = await createOffscreenCanvas('2d', width, height); const ctx = (context.getContext('2d') as CanvasRenderingContext2D); const imgElement: any = await loadImageByUrlToCanvasImageData(imageUrl, width, height); ctx.fillStyle = 'white'; ctx.fillRect(0, 0, width, height); ctx.fillStyle = titleInfo.color || 'black'; ctx.font = titleInfo.font || ''; ctx.textAlign = 'center'; ctx.fillText(title, titleInfo.dx || 0, titleInfo.dy || 0); ctx.drawImage(imgElement, imagePos.dx, imagePos.dy); const filePath = await changeCanvasToImageFileAndSaveToTempFilePath({ canvas: (context as Canvas), width, height, fileType: 'png', destWidth: width, destHeight: height, }); return filePath; }; -
具体使用
export const saveQrCodeImageWithTitle = async () => { const url = await qrCodeImage(enterAiyongShopUrl(), 160); const imgUrl: string = await generateQrCodeWithTitle({ title: 'adsionli菜鸡前端', titleInfo: { dx: 95, dy: 20, font: '600 14px PingFang SC', color: 'black', }, imageUrl: url, imagePos: { dx: 15, dy: 34, }, width: 190, height: 204, }); await downloadImage([imgUrl]); }
上面三块内容就可以组成我们的海报生成了，这里面的主要步骤不是很难，包括了几个方面：
- 用户授权鉴定，主要是是否允许保存，这里做了一点处理，就是可以在用户第一次授权不允许时，进行二次授权调起，这个可以看一下上面的
downloadImage这个函数，以及用于判断用户是否授权的checkHasAuthorizedSaveImagePermissions这个函数 - 创建
OffscreenCanvas并进行绘制，这里其实没有太多的难点，主要就是需要知道，如果我们使用image的内容的话，或者是一个图片的url时，我们需要先将其绘制到一个canvas上(这里可以获取imageElement对象，也可以直接使用canvas)，这样方便我们后面进行drawImage时进行使用 - 图片保存，这里也有一个需要注意的点，如果图片(或二维码)是网络图片的话，我们需要处理以下，先将其转成本地图片，也就是通过
netImageToLocal这个方法，然后再还给对应的将图片画在canvas上的方法。最后的保存很简单，我们可以直接使用Taro.canvasToTempFilePath这个方法转到临时地址，再通过downloadImage就可以搞定了。
感觉好像很麻烦，其实就四步：图片加载转化—>canvas绘制—>用户鉴权—>图片保存。
安卓端实现起来还是很简单的，但是这些方法对于ios端就出现了问题，如果按照上面的路线进行海报绘制保存的话，在ios端就会报一个错误(在本地开发的时候并不会抛出): canvasToTempFilePath:fail invalid viewId
这一步错误就是发生在Taro.canvasToTempFilePath这里，保存到临时文件时会触发，然后这一切的原因就是使用了OffscreenCanvas离屏canvas造成的。
所以为了能够兼容ios端的这个问题，有了以下的修改：
首先需要在我们要下载海报的pages中，添加一个Canvas，帮助我们可以获取CanvasElement
<Canvas
type='2d'
id='qrCodeOut'
className='aiyong-shop__qrCode'
/>
这里需要注意一下，我们需要添加一个type='2d'的属性，这是为了能够使用官方提供的获取Canvas2dContext的属性，这样就可以不使用createCanvasContext这个方法来获取了(毕竟已经被官方停止维护了)。
然后我们就可以获取一下CanvasElement对象了
/**
* @description 获取canvas标签对象
*/
export const getCanvasElement = (canvasId: string): Promise<Taro.NodesRef> => {
return new Promise(resolve => {
const canvasSelect: Taro.NodesRef = selectQuery().select(`#${canvasId}`);
canvasSelect.node().exec((res: Taro.NodesRef) => {
resolve(res);
});
});
};
注：这里又有一个小坑，我们在获取CanvasElement之后，如果直接进行绘制的话，这里存在一个问题，就是这个CanvasElement的width:300、height:150被限制死了，所以我们需要自己在拿到CanvasElement之后，在设置一下width、height。
const canvasNodeRef = await getCanvasElement(canvas);
let context;
if (canvasNodeRef && canvasNodeRef[0].node !== null) {
context = canvasNodeRef[0].node;
(context as Taro.Canvas).width = width;
(context as Taro.Canvas).height = height;
}
好了，改造完成，这样就可以兼容ios端的内容了，实际我们只需要修改generateQrCodeWithTitle这个方法和page新增Canvas用于获取CanvasElement就可以了，其他可以不要动。修改后的generateQrCodeWithTitle方法如下:
/**
* @description 获取二维码图像并设置标题
*/
export const generateQrCodeWithTitle = async (option: SettingOptions): Promise<string> => {
const {
title,
titleInfo,
imageUrl,
imagePos,
width,
height,
qrCodeSize,
canvas,
} = option;
const canvasNodeRef = await getCanvasElement(canvas);
let context;
if (canvasNodeRef && canvasNodeRef[0].node !== null) {
context = canvasNodeRef[0].node;
(context as Taro.Canvas).width = width;
(context as Taro.Canvas).height = height;
}
const ctx = (context.getContext('2d') as CanvasRenderingContext2D);
const imgElement: Taro.Image = await loadImageByUrlToCanvasImageData(imageUrl, qrCodeSize.width, qrCodeSize.height);
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = titleInfo.color || 'black';
ctx.font = titleInfo.font || '';
ctx.textAlign = 'center';
ctx.fillText(title, titleInfo.dx || 0, titleInfo.dy || 0);
ctx.drawImage((imgElement as HTMLImageElement), imagePos.dx, imagePos.dy, imgElement.width, qrCodeSize.height);
const filePath = await changeCanvasToImageFileAndSaveToTempFilePath({
canvas: (context as Canvas),
width,
height,
fileType: 'png',
destWidth: width,
destHeight: height,
});
return filePath;
};
如果大家不想让海报被人看到，那可以设置一下css
.qrCode { position: fixed; left: 100%; }这样就可以啦
突然发现内容可能有点多了，所以打算分成两篇进行Taro使用过程中的总结，开发完之后进行总结，总是可以让自己回顾在开发过程中遇到的问题的进一步进行思考，这是一个很好的进步过程，加油加油！！！