微信小程序保存图片功能实现
2024-10-19 07:39:55
小程序保存图片功能实现
wxml:
<view class="previewImage" style="display:{{previewImage}}" bindtap="closePrev">
<image src="{{img.url}}" mode="aspectFit" style="width:100%;height:100%;" catchlongtap="saveImg"></image>
</view>
<action-sheet hidden="{{saveImage}}" bindchange="actionSheetChange">
<block>
<action-sheet-item class="item" bindtap="downloadFile" data-image-href="{{img.url}}">保存图片</action-sheet-item>
</block>
<action-sheet-cancel class="cancel">取消</action-sheet-cancel>
</action-sheet>
wxss:
.previewImage{
position: absolute;
top:;
left:;
width: 100%;
height: 100%;
background-color: #000;
}
js:
previewImg:function(){
this.setData({
previewImage:"block"
});
},
saveImg:function(){
longTouch = true;
this.setData({
saveImage:false
})
},
closePrev:function(){
if(longTouch){
longTouch = false;
}else{
this.setData({
previewImage:"none"
});
}
},
actionSheetChange:function(){
this.setData({
saveImage:!this.data.saveImage
})
},
downloadFile:function(e){
var imgUrl = e.currentTarget.dataset.imageHref;
var that = this;
wx.downloadFile({
url: imgUrl,
type: 'image',
success:function(res){
var tempFilePath = res.tempFilePath;
console.log(tempFilePath);
wx.saveFile({
tempFilePath:tempFilePath,
success:function(res){
var savedFilePath = res.savedFilePath;
console.log(savedFilePath);
that.setData({
saveImage:true
});
},
fail:function(res){
console.log(res);
}
});
},
fail:function(res){
console.log(res);
}
});
}
最新文章
- java的锁机制
- 50个常用SQL语句
- Command调用存储过程小实例
- SOCKet 编程 简介
- HTML JavaScript的DOM操作
- PHP编译支持mysqli
- Hex-Rays Decompiler Tips and tricks Volatile memory
- IOS 开发中判断NSString是否为空字符
- SVN四部曲之SVN命令精通
- 关于启动 Eclipse 弹出“Failed to load the JNI shared library jvm.dll”错误的解决方法!
- 简单jquery 鼠标悬停提示效果
- android-satellite-menu
- SetTimer 和 OnTimer 的使用
- Mysql mysql lost connection to server during query 问题解决方法
- wdcp使用记录--持续更新
- BZOJ_2580_[Usaco2012 Jan]Video Game_AC自动机+DP
- sublime text 3搭建python
- SQL跨服务器查询数据库
- mysql 5.7主从库复制设置
- MongoDB-管道与聚合(3)
热门文章
- SpringMVC中为什么要配置Listener和Servlet
- HDU 5828 Rikka with Sequence(线段树 开根号)
- 最优贸易 NOIP 2009 提高组 第三题
- hdu 5868 2016 ACM/ICPC Asia Regional Dalian Online 1001 (burnside引理 polya定理)
- 【二分】Urozero Autumn Training Camp 2016 Day 5: NWERC-2016 Problem C. Careful Ascent
- JavaScript继承方式
- 使用phpExcel实现Excel数据的导入导出(完全步骤)
- ARM体系下的GCC内联汇编
- material design动画
- text-align 属性,输入框数字向右靠