收藏
回答

微信小程序canvasToTempFilePath 保存时候无法保存图片文字可以保存?

// pages/dispatch/waybillModel/components/shareDrawing/index.js
Component({
	/**
	 * 组件的属性列表
	 */
	properties: {


	},


	/**
	 * 组件的初始数据
	 */
	data: {
		photoFile: '' //本地图片路径
	},


	/**
	 * 组件的方法列表
	 */
	methods: {
		/**
		 * 获取本地图片
		 */
		getPhotoFile: function(e) {
			e.success(this.data.photoFile);
		},


		getShareDrawing: function(e) {
			let _this = this;
			let goodsName = e.goodsName; //货物名称
			let beginCity = e.beginCity; //出发省份
			let beginAddress = e.beginAddress; //出发详细地址
			let endCity = e.endCity; //目的地城市
			let endAddress = e.endAddress; //目的地详情地址
			let QRCode = e.QRCode; //二维码图片
			//返回一个 SelectorQuery 对象实例
			const query = this.createSelectorQuery();
			//选择canvas
			query.select('#myCanvas')
				.fields({
					node: true,
					size: true
				})
				.exec((res) => {
				   
					const canvas = res[0].node; //获取 canvas 对象
					const ctx = canvas.getContext('2d'); // 获取Context 对象


					//canvas 缩放
					const dpr = wx.getSystemInfoSync().pixelRatio;
					canvas.width = res[0].width * dpr;
					canvas.height = res[0].height * dpr;
					ctx.scale(dpr, dpr);
						
					//绘制顶部边条
					_this.setHeadStrip(canvas, ctx);
					//绘制货物名称
					_this.setTitle(ctx, goodsName);
					//绘制提示
					_this.setTips(ctx);
					//绘制二维码
					_this.setQRCode(canvas, ctx, QRCode)


					//绘制出发地图标
					_this.setBeginIcon(canvas, ctx);
					//绘制出发省份
					_this.setBeginCity(ctx, beginCity);
					//绘制出发详细地址
					_this.setBeginAddress(ctx, beginAddress);
					//绘制目的地图标
					_this.setEndIcon(canvas, ctx);
					//绘制目的地城市
					_this.setEndCity(ctx, endCity);
					//绘制目的地详情地址
					_this.setEndAddress(ctx, endAddress);
					//生成图片
					wx.canvasToTempFilePath({
						canvas,
						success(res) {
							_this.setData({
								photoFile: res.tempFilePath
							})
						}
					})


					//end exec
				})
			//end


		},
		/**
		 * 设置货物名称
		 * @param {Object} ctx  Context 对象
		 * @param {Object} str  名称文本
		 */
		setTitle: function(ctx, str) {
			const width = 342 // 获取设备宽度
			ctx.font = '500 19px PingFangSC-Medium';
			ctx.fillStyle = '#000';
			ctx.fillText(str, (width - ctx.measureText(str).width) * 0.5, 40);
		},
		/**
		 * 设置顶部条形
		 * @param {Object} canvas canvas 对象
		 * @param {Object} ctx  Context 对象
		 * @param {Object} src 图片链接
		 */
		setHeadStrip: function(canvas, ctx) {
			const headerImg = canvas.createImage(); // 获取image 对象
			headerImg.src = 'https://cdn.nucarf.cn/xgb/v1.0/public/head.png';
			headerImg.onload = () => {
				ctx.drawImage(headerImg, 0, 0, 342, 10);
			};
		},
		/**
		 * 绘制二维码
		 * @param {Object} canvas  canvas 对象
		 * @param {Object} ctx  Context 对象
		 * @param {Object} src 图片链接
		 */
		setQRCode: function(canvas, ctx, src) {
			const headerImg = canvas.createImage(); // 获取image 对象
			headerImg.src = src;
			headerImg.onload = () => {
				ctx.drawImage(headerImg, 101, 103, 140, 140);
				ctx.restore();
			};
		},
		/**
		 * 绘制提示
		 * @param {Object} ctx  Context 对象
		 */


		setTips: function(ctx) {
			const width = 342 // 获取设备宽度
			ctx.font = '500 15px PingFangSC-Medium';
			ctx.fillStyle = '#F1950A';
			let str = "请司机扫码上传证件";
			ctx.fillText(str, (width - ctx.measureText(str).width) * 0.5, 70);
		},


		/**
		 * 绘制出发地图标
		 *  @param {Object} canvas  canvas 对象
		 *  @param {Object} ctx  Context 对象
		 */
		setBeginIcon: function(canvas, ctx) {
			const headerImg = canvas.createImage(); // 获取image 对象
			headerImg.src = 'https://cdn.nucarf.cn/xgb/v1.0/public/begin1.png';
			headerImg.onload = () => {
				ctx.drawImage(headerImg, 30, 300, 21, 34);
			};
		},
		/**
		 * 绘制出发城市
		 */
		setBeginCity: function(ctx, str) {
			ctx.font = '500 16px PingFangSC-Medium';
			ctx.fillStyle = '#000';
			ctx.fillText(str, 61, 310);
		},
		/**
		 * 绘制详细地址
		 */
		setBeginAddress: function(ctx, str) {
			ctx.font = '400 14px PingFangSC-Medium';
			ctx.fillStyle = '#666666';
			ctx.fillText(str, 61, 330);
		},
		/**
		 * 绘制目的地图标
		 *  @param {Object} canvas  canvas 对象
		 *  @param {Object} ctx  Context 对象
		 */
		setEndIcon: function(canvas, ctx) {
			const headerImg = canvas.createImage(); // 获取image 对象
			headerImg.src = 'https://cdn.nucarf.cn/xgb/v1.0/public/end1.png';
			headerImg.onload = () => {
				ctx.drawImage(headerImg, 30, 368, 21, 34);
			};
		},
		/**
		 * 绘制目的地城市
		 */
		setEndCity: function(ctx, str) {
			ctx.font = '500 16px PingFangSC-Medium';
			ctx.fillStyle = '#000';
			ctx.fillText(str, 61, 380);
		},
		/**
		 * 绘制目的地详细地址
		 */
		setEndAddress: function(ctx, str) {
			ctx.font = '400 14px PingFangSC-Medium';
			ctx.fillStyle = '#666666';
			ctx.fillText(str, 61, 400);
		}










	}
})


回答关注问题邀请回答
收藏

4 个回答

  • 周冉
    周冉
    2021-06-21

    图片onload是异步的,所以你canvasToTempFilePath时图片还没画完呢。要么你把绘制图片改成Promise,要么你加个延时。

    2021-06-21
    有用 1
    回复 5
    • 小福
      小福
      2021-06-21
      canvas 背景图片可以保存吗
      2021-06-21
      回复
    • 周冉
      周冉
      2021-06-21回复小福
      肯定不行,只能保存画出来的
      2021-06-21
      回复
    • 小福
      小福
      2021-06-21
      画出来,分层怎么弄。我的文字覆盖不到图片上
      2021-06-21
      回复
    • 周冉
      周冉
      2021-06-22回复小福
      先画图,然后再画文字,按顺序叠加绘制
      2021-06-22
      1
      回复
    • 清渡失眠
      清渡失眠
      2021-09-09
      canvas 斜体无效(新版旧版都无效)怎么解决?
      2021-09-09
      回复
  • Endy
    Endy
    2021-06-21

    仔细读文档

    2021-06-21
    有用 1
    回复 3
    • 小福
      小福
      2021-06-21
      2021-06-21
      回复
    • 小福
      小福
      2021-06-21
      还是不行
      2021-06-21
      回复
    • 小福
      小福
      2021-06-21
      刚刚加的
      2021-06-21
      回复
  • 小福
    小福
    2021-06-21

    2021-06-21
    有用 1
    回复 3
    • 小福
      小福
      2021-06-21
      实际效果是有图片的,页面可以展示,但是一保存就没了
      2021-06-21
      回复
    • Lucky Sunshine
      Lucky Sunshine
      2022-09-27
      我也遇到相同问题,请问楼主解决了没有?
      2022-09-27
      回复
    • 小福
      小福
      04-11回复Lucky Sunshine
      图片保存是异步的
      04-11
      回复
  • 清渡失眠
    清渡失眠
    2021-09-09

    canvas 斜体无效(新版旧版都无效)怎么解决?


    2021-09-09
    有用
    回复
登录 后发表内容