收藏

分享

回答

置顶画布在真机模拟中可以正常使用功能（画布生成图片），但在发布小程序成功之后，功能未能正常使用？精选热门

2019-10-082453浏览问题模块： API和组件

<canvas canvas-id='share' style='width:1000px;height:1300px;positon:fixed;left:0;' hidden='{{canvasHidden}}'></canvas>

<view bindtap='saveImg' style="text-align:center;"><text>保存</text>

<button class='openSetting' open-type="openSetting" bindopensetting='handleSetting' hidden='{{openSettingBtnHidden}}'>授权</button>

</view>

data: {

canvasHidden: true,

},

saveImg: function (e) {

var that = this;

wx.showLoading({

title: '正在生成图片...'

})

//设置画板显示，才能开始绘图

that.setData({

canvasHidden: false

})

const context = wx.createCanvasContext('share');

//用户头像昵称

//console.log(that.data.avatarUrl, that.data.nickName)

let userPath = '/pages/tool/Business_card_production/Business_production/business/image/lm.png';

let userPath1 = '/pages/tool/Business_card_production/Business_production/business/image/lm1.png';

let userwshb = '/pages/tool/Business_card_production/Business_production/business/image/wshb.png';

let userzyjx = '/pages/tool/Business_card_production/Business_production/business/image/zyjx.png';

let useryszf = '/pages/tool/Business_card_production/Business_production/business/image/yszf.png';

let userwshb1 = '/pages/tool/Business_card_production/Business_production/business/image/wshb_01.png';

let userzxt = '/pages/tool/Business_card_production/Business_production/business/image/zxt.png';

let userPhone = '/pages/tool/Business_card_production/Business_production/business/image/sj.png';

let userAddress = '/pages/tool/Business_card_production/Business_production/business/image/dz.png';

let userLxxx = '/pages/tool/Business_card_production/Business_production/business/image/lxxx.png';

let userEwm = '/pages/tool/Business_card_production/Business_production/business/image/ewm.png';

let userEwm2 = '/pages/tool/Business_card_production/Business_production/business/image/ewm_02.png';

let userEwm1 = '/pages/tool/Business_card_production/Business_production/business/image/ewm_01.png';

let userSzx = '/pages/tool/Business_card_production/Business_production/business/image/szx.png';

let userSzx1 = '/pages/tool/Business_card_production/Business_production/business/image/szx1.png';

let jxz = '/pages/tool/Business_card_production/Business_production/business/image/canvasjxz.png';

let jxy = '/pages/tool/Business_card_production/Business_production/business/image/canvasjxy.png';

//开始绘制

context.stroke();

context.rect(0, 0, 1000, 1300);

context.setFillStyle('white');

context.fill();

context.drawImage(userwshb, 300, 60);

context.drawImage(userzxt, 20, 300);

//边框

context.setStrokeStyle('#FBC000');

context.strokeRect(0, 0, 995, 600);

context.setStrokeStyle('#FBC000');

context.strokeRect(2, 2, 995, 595);

context.setStrokeStyle('#FBC000');

context.strokeRect(4, 4, 990, 590);

context.setStrokeStyle('#FBC000');

context.strokeRect(7, 7, 985, 585);

context.setStrokeStyle('#FBC000');

context.strokeRect(10, 10, 980, 580);

context.setStrokeStyle('#FBC000');

context.strokeRect(12, 12, 976, 576);

context.setFontSize(43)

context.setFillStyle("#000")

context.fillText('小海', 67, 433)

context.drawImage(userLxxx, 360, 400);

context.setFontSize(25)

context.setFillStyle("#333")

context.fillText('13012334246', 430, 433)

context.setFontSize(25)

context.setFillStyle("#333")

context.fillText('gz', 430, 536)

context.save(); // 先保存状态

context.beginPath();

context.arc(500, 670, 80, 0, Math.PI * 2, false);

context.setFontSize(50)

context.drawImage(userPath1, 140,680);

context.setFontSize(42) //文字大小

context.setFillStyle("#F2AC3C") //文字颜色

context.fillText("集团", 108, 886);//1,左,2,上

context.drawImage(userEwm2, 112,925);

//边框

context.setStrokeStyle('#FBC000');

context.strokeRect(0, 600, 995, 598);

context.setStrokeStyle('#FBC000');

context.strokeRect(2, 600, 995, 595);

context.setStrokeStyle('#FBC000');

context.strokeRect(4, 600, 990, 596);

context.setStrokeStyle('#FBC000');

context.strokeRect(7, 600, 985, 600);

context.setStrokeStyle('#FBC000');

context.strokeRect(10, 600, 980, 596);

context.setStrokeStyle('#FBC000');

context.strokeRect(12, 600, 976, 594);

context.setStrokeStyle('#FBC000');

context.strokeRect(14, 600, 975, 592);

//szx

context.drawImage(userSzx1, 460, 650);

//文字

context.setFontSize(42) //文字大小

context.setFillStyle("#000") //文字颜色

context.fillText("业务范围", 620, 740);//1,左,2,上

context.setFontSize(33) //文字大小

context.setFillStyle("#F8C26D") //文字颜色

context.fillText("•", 590, 830);//1,左,2,上

context.setFontSize(30) //文字大小

context.setFillStyle("#353231") //文字颜色

context.fillText("办理及打造", 610, 830);//1,左,2,上

context.setFontSize(33) //文字大小

context.setFillStyle("#F8C26D") //文字颜色

context.fillText("•", 590, 890);//1,左,2,上

context.setFontSize(30) //文字大小

context.setFillStyle("#353231") //文字颜色

context.fillText("配套专用", 610, 890);//1,左,2,上

context.setFontSize(33) //文字大小

context.setFillStyle("#F8C26D") //文字颜色

context.fillText("•", 590, 950);//1,左,2,上

context.setFontSize(30) //文字大小

context.setFillStyle("#353231") //文字颜色

context.fillText("支付通道", 610, 950);//1,左,2,上

context.setFontSize(33) //文字大小

context.setFillStyle("#F8C26D") //文字颜色

context.fillText("•", 590, 1008);//1,左,2,上

context.setFontSize(30) //文字大小

context.setFillStyle("#353231") //文字颜色

context.fillText("资产打造", 610, 1008);//1,左,2,上

context.setFontSize(33) //文字大小

context.setFillStyle("#F8C26D") //文字颜色

context.fillText("•", 590, 1070);//1,左,2,上

context.setFontSize(30) //文字大小

context.setFillStyle("#353231") //文字颜色

context.fillText("评估及修复", 610, 1070);//1,左,2,上

//把画板内容绘制成图片，并回调画板图片路径

context.draw(false, function () {

wx.hideLoading()

// wx.showLoading({

// title: '保存中...',

// })

wx.canvasToTempFilePath({

x: 0,

y: 0,

width: 1000,

height: 1202,

destWidth: 1000,

destHeight: 1200,

canvasId: 'share',

success: function (res) {

that.setData({

shareImgPath: res.tempFilePath,

canvasHidden: true

})

//预览

wx.previewImage({

current: 'that.data.shareImgPath',

urls: [that.data.shareImgPath]

})

if (!res.tempFilePath) {

wx.hideLoading()

wx.showModal({

title: '提示',

content: '图片绘制中，请稍后重试',

showCancel: false

})

}

//绘制成功后将图片保存到用户相册

//绘制成功后将图片保存到用户相册

wx.saveImageToPhotosAlbum({

filePath: res.tempFilePath,

//保存成功失败之后，都要隐藏画板，否则影响界面显示。

success: (res) => {

//console.log(res)

wx.hideLoading()

wx.showToast({

title: '已保存！',

icon: 'none',

showCancel: false,

success: function (res) {

that.setData({

canvasHidden: true

})

}

})

},

fail: (err) => {

console.log(err)

wx.hideLoading()

wx.showModal({

title: '失败请重试！',

content: '',

showCancel: false,

success: function (res) {

that.setData({

canvasHidden: true

})

}

})

}

})

}

})

});

this.onHide();

wx.getSetting({

success(res) {

if (!res.authSetting['scope.writePhotosAlbum']) {

wx.authorize({

scope: 'scope.writePhotosAlbum',

success() {

//这里是用户同意授权后的回调

that.saveImgToLocal();

},

fail() {//这里是用户拒绝授权后的回调

that.setData({

openSettingBtnHidden: false

})

}

})

} else {//用户已经授权过了

that.saveImgToLocal();

}

}

})

}

},

saveImgToLocal: function (e) {

let that = this;

let imgSrc1 = '';

imgSrc1 = that.data.imgs;

//.let countImage=imgSrc+imgSrc1;

wx.downloadFile({

url: imgSrc1,

success: function (res) {

console.log(res);

//图片保存到本地

wx.saveImageToPhotosAlbum({

filePath: res.tempFilePath,

success: function (data) {

wx.showToast({

title: '保存成功',

icon: 'success',

duration: 2000

})

},

})

}

})

},

最后一次编辑于 2019-10-09

收藏

分享

3 个回答

小、海
2019-10-09
加粗
标红
插入代码
插入链接
插入图片
上传视频
请登录后发表内容
关闭
新增或编辑超链接
链接地址
确认取消
关闭
插入视频
视频链接
确认取消
发表
第一次发布，请见谅
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
待楼主反馈
2019-10-09
有用
回复
关闭
请选择投诉理由
广告内容
违法违规
恶意灌水内容
其他
进击的学霸
2019-10-09
加粗
标红
插入代码
插入链接
插入图片
上传视频
请登录后发表内容
关闭
新增或编辑超链接
链接地址
确认取消
关闭
插入视频
视频链接
确认取消
发表
就算你不做代码片段，贴代码好歹放在代码块里吧，这代码谁看着不难受。。。

你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
待楼主反馈
2019-10-09
有用
回复
关闭
请选择投诉理由
广告内容
违法违规
恶意灌水内容
其他
卢霄霄
2019-10-09
加粗
标红
插入代码
插入链接
插入图片
上传视频
请登录后发表内容
关闭
新增或编辑超链接
链接地址
确认取消
关闭
插入视频
视频链接
确认取消
发表
能做个代码片段吗？初步看下来，就只有 wx.previewImage的时候 current那里不应该要引号
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
待楼主反馈
2019-10-09
有用
回复 2
- 小、海
  2019-10-13
  加粗
  标红
  插入代码
  插入链接
  插入图片
  上传视频
  请登录后发表内容
  关闭
  新增或编辑超链接
  链接地址
  确认取消
  关闭
  插入视频
  视频链接
  确认取消
  发表
  关键不是这个，
  你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
  待楼主反馈
  2019-10-13
  赞
  回复
  关闭
  请选择投诉理由
  广告内容
  违法违规
  恶意灌水内容
  其他
- 小、海
  2019-10-13
  加粗
  标红
  插入代码
  插入链接
  插入图片
  上传视频
  请登录后发表内容
  关闭
  新增或编辑超链接
  链接地址
  确认取消
  关闭
  插入视频
  视频链接
  确认取消
  发表
  下载域名通过，发布成功之后，苹果手机不能正常使用功能
  你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
  待楼主反馈
  2019-10-13
  赞
  回复
  关闭
  请选择投诉理由
  广告内容
  违法违规
  恶意灌水内容
  其他
关闭
请选择投诉理由
广告内容
违法违规
恶意灌水内容
其他

请登录后发表内容

相关文档

问题标签

wxmlcanvasbindtapshowloading授权