保存图片
2.我们在看看看js代码在用wx.canvasToTempFilePath方法会返回一个tempFilePath图片路径
//canvas全局配置
varcontext=null;
varrpx
varposterHeight=0
varposterWidth=0
varavatarPadding=0//距离边界
varavatarRadiu=0//头像半径
vartextScale=0//文字比例
//注册页面
Page({
data:{
img:"../../images/img1.jpg",
myCanvasWidth:0,
myCanvasHeight:0,
posterHeight:0,
},
onLoad:function(options){
varthat=this
varmyCanvasWidth=that.data.myCanvasWidth//为了让图片满铺页面
varmyCanvasHeight=that.data.canvasHeight
context=wx.createCanvasContext('canvas');
wx.getSystemInfo({
success:function(res){
myCanvasWidth=res.screenWidth
myCanvasHeight=res.screenHeight
posterWidth=Math.round(res.screenWidth*0.68)//计算让画布图片自适应
posterHeight=Math.round(posterWidth*1920/1080)
avatarPadding=Math.round(posterWidth*20/375)
avatarRadiu=Math.round(posterWidth*25/375)
textScale=Math.round(posterWidth/375)
rpx=res.windowWidth/375;
that.setData({
myCanvasWidth:myCanvasWidth,
myCanvasHeight:myCanvasHeight,
posterHeight:posterHeight
})
context.drawImage(that.data.img,0,0,that.data.myCanvasWidth,that.data.myCanvasHeight);//画布绘制图片
context.draw();
},
})
},
clickMe:function(){//保存图片
wx.canvasToTempFilePath({
canvasId:'canvas',
fileType:'jpg',
success:function(res){
console.log(res)
wx.saveImageToPhotosAlbum({
filePath:res.tempFilePath,
success(res){
console.log(res)
wx.hideLoading();
wx.showToast({
title:'保存成功',
});
////存入服务器
//wx.uploadFile({
//url:'a.php',//接口地址
//filePath:res.tempFilePath,
//name:'file',
//formData:{//HTTP请求中其他额外的formdata
//'user':'test'
//},
//success:function(res){
//console.log(res);
//},
//fail:function(res){
//console.log(res);
//},
//complete:function(res){
//}
//});
},
fail(){
wx.hideLoading()
}
})
}
})
},
})
3,css样式直接给画布设置高度宽度就可以图片会铺满屏幕
总结
以上所述是小编给大家介绍的微信小程序点击保存图片到本机功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。