<view class="saveImg" bindtap="saveImg">保存到相册</view>
<view class="canvasImg" wx:if="{{canvasImgState&&!tempFilePathState}}">
<canvas canvas-id="myCanvas" style='width:{{canvasW}}px; height:{{canvasH}}px;' />
</view>
<image class="canvasImg" src="{{tempFilePathUrl}}" wx:if="{{tempFilePathState}}"></image>
**
因为canvas 渲染过后
页面没有退出再次会不生效,所有要将生成好的图片保存一下,判断当前已有好报图片后就不会重新绘画,直接用images标签展示出来就行
**
图片必须要下载后获取地址 网络图片地址的域名必须要在小程序后台添加一下域名 否则下载会失败
//绘制canvas的方法
data:{
canvasW:'',
canvasH:'',
canvasImgState:false,// canvas 展示的状态
tempFilePathUrl:'',//生成的图片
tempFilePathState:false,// 这是图片images 的标签展示状态
},
getcanvas() {
wx.showToast({
title: '正在生成图片',
icon: 'loading'
})
let that = this
let rpx = 1;
//适配手机
wx.getSystemInfo({
success(res) {
console.log(res)
rpx = res.windowWidth / 375;
that.setData({
canvasW: res.windowWidth ,
canvasH: res.windowHeight,
})
}
})
var w = that.data.canvasW;
var h = that.data.canvasH;
let ctx = wx.createCanvasContext('myCanvas')
let logoposter=''
let wxlogo=''
wx.getImageInfo ({
src:'https://bj.bcebos.com/v1/aibanktest/static/logoposter.png',
success: function(res){
console.log(res)
logoposter=res.path
},fail:(err)=>{
wx.showToast({
title: '下载图片失败!',
icon:'error',
duration:3000
})
that.setData({
canvasImgState:false,
})
}
})
wx.getImageInfo ({
src:'https://bj.bcebos.com/v1/aibanktest/static/wxlogo.jpg',
success: function(res){
console.log(res)
wxlogo=res.path
},fail:(err)=>{
wx.showToast({
title: '下载图片失败!',
icon:'error',
duration:3000
})
that.setData({
canvasImgState:false,
})
}
})
ctx.beginPath();
// ctx.fillStyle="#030726";
ctx.arc(0,0,w*rpx, h);
//网络图片必须要先下载 及后台给的网络地址图片 而且域名必须要在小程序后台域名添加
wx.getImageInfo ({
src:'https://bj.bcebos.com/v1/aibanktest/static/canvasB.png',
success: function(res){
console.log(res)
ctx.fillStyle='#030726'
ctx.fillRect(0,0,750*rpx,h)
if(h>736){
ctx.drawImage(res.path, 0, 0, w, 680*rpx) // 背景
}else{
ctx.drawImage(res.path, 0, 0, w, 620*rpx) // 背景
}
ctx.restore();
ctx.font='19px sans-serif'
ctx.setTextAlign('left')
ctx.fillStyle='#fff'
// console.log(that.data.title)
ctx.fillText(that.data.title,50,90*rpx)
ctx.font='11px sans-serif'
ctx.setTextAlign('left')
ctx.fillStyl='#fff'
// console.log(that.data.brandName)
ctx.fillText('创作者:'+that.data.brandName,50,120*rpx)
var str = that.data.picUrl.replace('http:','https:')
wx.getImageInfo ({
src:str,
success: function(res){
console.log(res)
// canPicUrl=res.path
ctx.drawImage(res.path, 50*rpx, 130*rpx, 275*rpx, 265*rpx) // 主图
ctx.restore();
ctx.font='11px sans-serif'
ctx.setTextAlign('left')
ctx.fillStyle='#CCCCCC'
ctx.fillText('收藏者',50,420*rpx)
ctx.font='12px sans-serif'
ctx.setTextAlign('left')
ctx.fillStyle='#CCCCCC'
// console.log(that.data.userName)
ctx.fillText(that.data.userName,50,440*rpx)
ctx.font='11px sans-serif'
ctx.setTextAlign('left')
ctx.fillStyle='#CCCCCC'
ctx.fillText('资产 I D',50,470*rpx)
ctx.font='12px sans-serif'
ctx.setTextAlign('left')
ctx.fillStyle='#CCCCCC'
// console.log(that.data.assetId)
ctx.fillText(that.data.assetId,50,490*rpx)
ctx.font='11px sans-serif'
ctx.setTextAlign('left')
ctx.fillStyle='#CCCCCC'
ctx.fillText('交易哈希',50,520*rpx)
that.drawText(ctx, that.data.txId,50,540*rpx,2,218*rpx)
if(h>736){
ctx.drawImage(logoposter, 40, 710*rpx, 160*rpx, 45*rpx) // 左下角图
ctx.drawImage(wxlogo, 280*rpx, 700*rpx, 70*rpx, 70*rpx) // 右下角图 小程序logo
}else{
ctx.drawImage(logoposter, 40, 610*rpx, 150*rpx, 35*rpx) // 左下角图
ctx.drawImage(wxlogo, 280*rpx, 600*rpx, 58*rpx, 58*rpx) // 右下角图 小程序logo
}
ctx.restore();
ctx.draw( true, ()=>{
//保持图片
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
x: 0,
y: 0,
width: 750,
height: h*2,
destWidth: 750,
destHeight: h*2,
quality:0.6,
success: res => {
wx.hideToast()
let url=res.tempFilePath
// this.canvasPic = res.tempFilePath;
console.log('ee', res)
wx.saveImageToPhotosAlbum({
filePath:url,
success(res) {
console.log('res', res);
console.log('url', url);
wx.showToast({
title: '已保存到相册',
icon: 'success',
duration: 3000
})
that.setData({
canvasImgState:false,
tempFilePathUrl:url
})
},
fail: (rs) => {
that.setData({
canvasImgState:false,
tempFilePathUrl:url
})
// console.log('canvasToTempFilePath', rs)
}
})
},
fail: (rs) => {
that.setData({
canvasImgState:false
})
// console.log('canvasToTempFilePath', rs)
}
})
}); // 还原状态
},fail:(err)=>{
wx.showToast({
title: '下载图片失败!',
icon:'error',
duration:3000
})
that.setData({
canvasImgState:false,
})
}
})
}
})
},
//文字太长字段换行
drawText: function (ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {
var lineWidth = 0;
var lastSubStrIndex = 0; //每次开始截取的字符串的索引
for (let i = 0; i < str.length; i++) {
lineWidth += ctx.measureText(str[i]).width;
if (lineWidth > canvasWidth) {
ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //绘制截取部分
initHeight += 20; //16为字体的高度
lineWidth = 0;
lastSubStrIndex = i;
titleHeight += 16;
}
if (i == str.length - 1) { //绘制剩余部分
ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
}
}
// 标题border-bottom 线距顶部距离
titleHeight = titleHeight + 10;
return titleHeight
},
//保存图片
saveImg(){
this.setData({
canvasImgState:true
})
console.log(this.data.tempFilePathUrl)
let that = this
if(this.data.tempFilePathUrl!=''){
this.setData({
tempFilePathState:true
})
console.log(that.data.tempFilePathUrl)
wx.saveImageToPhotosAlbum({
filePath:that.data.tempFilePathUrl,
success(res) {
console.log(res)
wx.showToast({
title: '已保存到相册',
icon: 'success',
duration: 3000
})
that.setData({
canvasImgState:false,
tempFilePathState:false
})
},
fail: (rs) => {
wx.showModal({
title: '提示',
content: '需要您授权保存相册',
showCancel: false,
success: modalSuccess => {
wx.openSetting({
success(settingdata) {
console.log("settingdata", settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) {
wx.showModal({
title: '提示',
content: '获取权限成功,再次点击图片即可保存',
showCancel: false,
})
} else {
wx.showModal({
title: '提示',
content: '获取权限失败,将无法保存到相册哦~',
showCancel: false,
})
}
},
fail(failData) {
console.log("failData", failData)
}
})
}
})
console.log(rs)
that.setData({
canvasImgState:false,
tempFilePathState:false
})
// console.log('canvasToTempFilePath', rs)
}
})
}else{
this.getcanvas()
}
},