cocos creator 自定义Canvas分享
用cocos creator开发微信小游戏时,基本都会有分享模块,如果是直接分享当前显示的界面,则可以直接用
微信提供的canvas换图片功能即可,但是有时需要分享非屏幕显示出来的图片,这时就无法使用这种方式了,
就只有利用自定义canvas功能了
下面记录一下当前自己项目中遇到的关于分享功能的处理过程:
1.主要用到的微信接口
— 创建canvas,后续生成的分享图就是用这个canvas生成的
wx.createCanvas();
—向canvas画入文本,图片等都是通过这个对象操作的
myShareCanvas.getContext(“2d”)
—向canvas绘制图片
drawImage()
—向canvas绘制文本
fillText()
—下载服务器资源
wx.downloadFile
—分享接口
shareAppMessage
2.下面介绍创建、绘制canvas流程
// 先创建canvas对象
var shareCanvas = wx.createCanvas();
var ctx = shareCanvas.getContext("2d");
// 先创建一个预设,在上面挂设一个脚本,并定义spriteFrame属性,然后把需要用到图片资源在
// 工程中拖入该属性中
// 假如脚本名称为shareImagePrefab. 属性为shareImageSpritFrame
// 如果需要绘制图片到canvas
// 这里加载预设并获取脚本shareImagePrefab对象
//先获取图片资源的url
let imgUrl = shareImagePrefabshareImageSpritFrame.getTexture().url;
// 如果在构建工程时勾选了MD5 Cache,则生成的资源名称都带有MD5
// 但是imgUrl是不带md5,这时需用处理一下获取带md5的完整路径
if (cc.loader.md5Pipe) {
localPath = cc.loader.md5Pipe.transformURL(localPath);
}
// 创建image
let img = new Image();
img.src =imgUrl ;
// 这里需要注意:如果资源是本地的则没有问题,可以顺利创建img,但是如果
//这里的预设资源shareImagePrefab是从服务器下载下来的,并且已经下载到本地,
// 则可能出现报错[wxgl] load image fail. 网上有人说是因为imgUrl不能使用相对路径,
//必须使用相对项目根目录的绝对路径,比如 res/Raw-Assets/a.png,但是我在项目中
// 使用的以是用cc.loader下载到本地的预设,然后获取到了spritFrame对象,并且路径
// 也是res开始的绝对路径,但是始终报错:load image fail.目前还没找到原因(该问题原因已找到,需要添加USER_DATA_PATH才行)
// 最后解决的办法是用先用过预设获取图片的url路径,然后用wx.downFile重新下载到
// 本地后,在回调中创建则可以
wx.downloadFile({
url: iconUrl,
success(res) {
img.src = res.tempFilePath;
}
})
// 创建image成功后则开始绘制到canvas中
ctx.drawImage(img,0,0,width,height,0,0,width,height)
// 绘制文本
ctx.font = "bold 24px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#C4AF55";
ctx.fillText("第 " + GameGlobal.GameLevel + " 关", 250, 269);
// 绘制完成后则开始从canvas获取图片
(canvas as Canvas).toTempFilePath({
x,
y,
width,
height,
destWidth: dstWidth,
destHeight: dstHeight,
fileType: "png",
quality: 1,
success: res => {
console.log(res.tempFilePath);
success && success(res.tempFilePath);
},
complete: () => {
fail && fail();
},
});
在成功回调中调用 接口 即可
wx.shareAppMessage({
title: “分享标题”,
imageUrl: res.tempFilePath,
});
使用img.src =imgUrl ;
imgUrl在工程中确实需要从项目根目录开始,在手机上则需从本地文件根目录开始,也就是用户文件目录:USER_DATA_PATH目录
用wx.downLoadFile下载的资源会有个以temp_开头的临时路径,这个路径就是在文件根目录下,所以直接用res.tempfilePath是有效的,但是我 项目中的资源是存在USE_DATA_PATH路径下的:wxFile://user/.