公告列表
公告列表
收藏
回答

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

<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授权