cocos creator 自定义Canvas分享

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/.