小程序
小游戏
企业微信
微信支付
扫描小程序码分享
这是在手机上我想要保存的:
这是我手机保存下来的样子:
在模拟器上,保存到电脑本地,正常,但是在手机上保存就只保存一半。
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
wxml://////////////
<canvas wx:if="{{d_c}}" style="z-index:20;border: 1px solid black;position:absolute;left:43rpx;top:80rpx;background-color:white;width:660rpx;height:{{c_height}}rpx;" canvas-id="myCanvas"/>
<button wx:if="{{d_c}}" style='z-index:20;position:absolute;left:250rpx;top:{{c_height+100}}rpx;' bindtap='share'>分享到朋友圈</button>
js://////////////
c_canvas:function(){
var that=this;
that.setData({d_c:true})
getApp().loading("请稍等……",30000)
wx.getImageInfo({
src: 'https://bmob-cdn-22087.bmobcloud.com/2018/11/28/98a3a696407c069080eabb219515a088.jpg',
success(res0){
src: that.data.img,
success(res) {
console.log(res)
const cts = wx.createCanvasContext('myCanvas')
cts.setFillStyle('white');
cts.fillRect(0, 0, 200, 323.6);
//上面是画背景
cts.drawImage(res.path,6, 5, 350, res.height / res.width * 350)
//画图片
cts.drawImage(res0.path, 5, res.height / res.width * 350+15, 100, 100)
//画二维码
cts.setFillStyle('black')
cts.setFontSize(20);
cts.setTextAlign('left');
cts.fillText(that.data.title, 130, res.height / res.width * 350 + 50);
cts.fillText("--" + that.data.userNickName, 350 - that.data.userNickName.length * 15, res.height / res.width * 350 + 110);
//画标题和名字
that.setData({ c_height: (res.height / res.width * 350 + 130)*1.8})
cts.draw(false, function (e) {
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
success: function (res) {
// 获得图片临时路径
that.data.canvasimg = res.tempFilePath;
}
})
});
wx.hideToast()
console.log(res.height)
},
share:function(){
wx.saveImageToPhotosAlbum({
filePath: this.data.canvasimg,
console.log(res.errMsg)
fail(res) {
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
能做个代码片段吗?
可能是你存图不是在 ctx.draw(false,callback)的callback里,也可能是你尺寸算错了
我能用canvas画出来,尺寸应该就是没错的吧
代码贴下边了
cts.drawImage 这些API里的尺寸的单位是px,不是rpx,看起来可能是这个缘故
代码片段是下面链接这个哈,我能跑起来,才看得出来问题哦。。
https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
https://developers.weixin.qq.com/s/y3mx7gms7A4d
应该可以用吧,第一次做代码片段
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
wxml://////////////
<canvas wx:if="{{d_c}}" style="z-index:20;border: 1px solid black;position:absolute;left:43rpx;top:80rpx;background-color:white;width:660rpx;height:{{c_height}}rpx;" canvas-id="myCanvas"/>
<button wx:if="{{d_c}}" style='z-index:20;position:absolute;left:250rpx;top:{{c_height+100}}rpx;' bindtap='share'>分享到朋友圈</button>
js://////////////
c_canvas:function(){
var that=this;
that.setData({d_c:true})
getApp().loading("请稍等……",30000)
wx.getImageInfo({
src: 'https://bmob-cdn-22087.bmobcloud.com/2018/11/28/98a3a696407c069080eabb219515a088.jpg',
success(res0){
wx.getImageInfo({
src: that.data.img,
success(res) {
console.log(res)
const cts = wx.createCanvasContext('myCanvas')
cts.setFillStyle('white');
cts.fillRect(0, 0, 200, 323.6);
//上面是画背景
cts.drawImage(res.path,6, 5, 350, res.height / res.width * 350)
//画图片
cts.drawImage(res0.path, 5, res.height / res.width * 350+15, 100, 100)
//画二维码
cts.setFillStyle('black')
cts.setFontSize(20);
cts.setTextAlign('left');
cts.fillText(that.data.title, 130, res.height / res.width * 350 + 50);
cts.fillText("--" + that.data.userNickName, 350 - that.data.userNickName.length * 15, res.height / res.width * 350 + 110);
//画标题和名字
that.setData({ c_height: (res.height / res.width * 350 + 130)*1.8})
cts.draw(false, function (e) {
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
success: function (res) {
// 获得图片临时路径
that.data.canvasimg = res.tempFilePath;
}
})
});
wx.hideToast()
console.log(res.height)
}
})
}
})
},
share:function(){
wx.saveImageToPhotosAlbum({
filePath: this.data.canvasimg,
success(res) {
console.log(res.errMsg)
},
fail(res) {
console.log(res.errMsg)
}
})
},
能做个代码片段吗?
可能是你存图不是在 ctx.draw(false,callback)的callback里,也可能是你尺寸算错了
我能用canvas画出来,尺寸应该就是没错的吧
代码贴下边了
cts.drawImage 这些API里的尺寸的单位是px,不是rpx,看起来可能是这个缘故
代码片段是下面链接这个哈,我能跑起来,才看得出来问题哦。。
https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
https://developers.weixin.qq.com/s/y3mx7gms7A4d
应该可以用吧,第一次做代码片段