我爱小程序
使用wxml-to-canvas组件生成图片后保存到本地是空白图片，调试也没有报错，手机无法保存到本地，有无大佬帮忙看看。
--index.xml
<button bindtap="ons">生成图片</button>
<button bindtap="on">保存图片</button>
<image src="{{src}}" wx:if="{{src.length>0}}" style="width: 570px;height: 289px;margin-top: 311px;margin-left: 90rpx;transform: rotate(90deg);transform-origin: top;"></image>
<wxml-to-canvas class="widget" width="570" height="289"></wxml-to-canvas>
--index.js
const app = getApp()
const {wxml, style} = require('../network.js')
Page({
data: {
},
onLoad() {
this.widget = this.selectComponent('.widget')
//onload方法里节点没加载完，设置定时器
setTimeout(() => {
//渲染到 canvas，传入 wxml 模板 和 style 对象，返回的容器对象包含布局和样式
//信息。
const p1 = this.widget.renderToCanvas({
wxml: wxml,
style,
});
p1.then((res) => {
this.container = res;
wx.hideLoading();
});
}, 500);
},
renderToCanvas() {
const p1 = this.widget.renderToCanvas({ wxml, style })
p1.then((res) => {
this.container = res
this.extraImage()
})
},
extraImage() {
const p2 = this.widget.canvasToTempFilePath()
p2.then(res => {
this.setData({
src: res.tempFilePath,
})
})
},
ons(){
this.renderToCanvas()
},
on(){
if(this.data.src.length>0){
let that = this
//若二维码未加载完毕，加个动画提高用户体验
wx.showToast({
icon: 'loading',
title: '正在保存图片',
duration: 1000
})
//判断用户是否授权"保存到相册"
wx.getSetting({
success (res) {
//没有权限，发起授权
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success () {//用户允许授权，保存图片到相册
that.savePhoto();
},
fail () {//用户点击拒绝授权，跳转到设置页，引导用户授权
wx.openSetting({
success () {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
that.savePhoto();
}
})
}
})
}
})
} else {//用户已授权，保存到相册
that.savePhoto()
}
}
})
}
},
//保存图片到相册，提示保存成功
savePhoto() {
let that = this
wx.downloadFile({
url: that.data.src,
success: function (res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
console.log("保存成功")
wx.showToast({
title: '保存成功',
icon: "success",
duration: 1000
})
},
fail(e){
console.log("保存失败"+e)
}
})
}
})
}
})
--network.js
const wxml =`
<view style="width: 570px;height: 289px;">
<view id="id" style="width: 570px;height: 219px;">
<view style="height: 10%;margin-top: 10rpx;">
<text class="font" space="emsp">检 斤 单</text>
</view>
<view style="height: 7%;">
<text class="fonta" space="emsp"> 工 厂：</text>
<text class="fonta" space="emsp" style="float: right;"> NO： </text>
</view>
<view style="height: 7%;margin-top: 10rpx;">
<text class="fonta" space="emsp"> IC卡号： 车牌号码： 打印时间：</text>
</view>
<view style="height: 60%;margin-top: 15rpx;padding-left: 20rpx;padding-right: 30rpx;">
<view>
<view style="width:25%;float: left;" class="border">
<text class="fontc" space="emsp"> 货物名称</text>
</view>
<view style="width:33%;float: left;" class="border"></view>
<view style="width:16%;float: left;" class="border">
<text class="fontc" space="emsp"> 毛重</text>
</view>
<view style="width:25%;float: left;" class="borderr"></view>
</view>
<view>
<view style="width:25%;float: left;" class="border">
<text class="fontc" space="emsp"> 货物规格</text>
</view>
<view style="width:33%;float: left;" class="border"></view>
<view style="width:16%;float: left;" class="border">
<text class="fontc" space="emsp"> 皮重</text>
</view>
<view style="width:25%;float: left;" class="borderr"></view>
</view>
<view>
<view style="width:25%;float: left;" class="border">
<text class="fontc" space="emsp"> 客户/供应商</text>
</view>
<view style="width:33%;float: left;" class="border"></view>
<view style="width:16%;float: left;" class="border">
<text class="fontc" space="emsp"> 净重</text>
</view>
<view style="width:25%;float: left;" class="borderr"></view>
</view>
<view>
<view style="width:25%;float: left;" class="border">
<text class="fontc" space="emsp"> 运输单位</text>
</view>
<view style="width:33%;float: left;" class="border"></view>
<view style="width:16%;float: left;" class="border">
<text class="fontc" space="emsp"> 流向</text>
</view>
<view style="width:25%;float: left;" class="borderr"></view>
</view>
<view>
<view style="width:25%;float: left;" class="borders">
<text class="fontc" space="emsp"> 末检时间</text>
</view>
<view style="width:33%;float: left;" class="borders"></view>
<view style="width:16%;float: left;" class="borders">
<text class="fontc" space="emsp"> 备注</text>
</view>
<view style="width:25%;float: left;" class="bordere"></view>
</view>
</view>
<view style="height: 10%;">
<text class="fonta" space="emsp"> 司磅员:</text>
<text class="fonta" space="emsp"> 司机:</text>
<text class="fonta" space="emsp" style="float: right;"> 第 次打印: </text>
</view>
</view>
</view>`
const style = {
canvas:{
width: '570px',
height: '289px',
marginTop: '311px',
marginLeft: '90rpx',
transform: 'rotate(90deg)',
transformOrigin: 'top',
backgroundColor:'white',
},
font:{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
textAlign: 'justify',
fontSize: "38rpx",
},
fonta:{
fontSize: '28rpx',
},
border:{
borderTop: 'black 3rpx solid',
borderLeft: 'black 3rpx solid',
height: '33px',
paddingTop: '8rpx',
},
borders:{
borderTop: 'black 3rpx solid',
borderLeft: 'black 3rpx solid',
borderBottom: 'black 3rpx solid',
height: '33px',
paddingTop: '8rpx',
},
borderr:{
borderTop: 'black 3rpx solid',
borderLeft: 'black 3rpx solid',
borderRight: 'black 3rpx solid',
height: '33px',
paddingTop: '8rpx',
},
bordere:{
border: 'black 3rpx solid',
height: '33px',
paddingTop: '8rpx',
},
fontc:{
fontSize: '30rpx',
}
}
module.exports = {
wxml,
style
}
网友回复
是否给图片配置了 downloadFile域名