chenbool
chenbool
  • 发布:2022-06-08 10:15
  • 更新:2022-06-08 10:15
  • 阅读:539

Native.js 实现 unaipp 截图

分类:uni-app
<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
    <image  :src="capture" ref="img"></image>  
        <view class="text-area">  
            <text class="title">{{title}}</text>  
        </view>  
    <button @tap="captureWebview"> 截图 </button>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello word !',  
        capture: '',  
            }  
        },  
        onLoad() {  
      // #ifdef APP-PLUS  
      console.log('系统: ', plus.os.name)   
      // console.log('version:' + plus.runtime.versionCode);  

      // 监听设备网络状态变化事件  
      plus.globalEvent.addEventListener('netchange', function(){  
        console.log('网络')  
      });  

      // #endif  
        },  
        methods: {  
      // 截屏绘制  
      captureWebview() {  
        var _this = this  
        var ws=plus.webview.getTopWebview();  
        var bitmap = new plus.nativeObj.Bitmap('test');  
        // 将webview内容绘制到Bitmap对象中  
        ws.draw(bitmap,function(){  
             console.log('截屏绘制图片成功');  
          bitmap.save( "_doc/a.jpg",{},  
          function(e){  
            console.log('保存图片成功:'+JSON.stringify(e));  
            //保存到相册  
            plus.gallery.save(e.target,(e)=>{  
              plus.nativeUI.toast("保存成功")  
            })  
          },  
          function(e){  
            console.log('保存图片失败:'+JSON.stringify(e));  
          });  
           _this.capture = bitmap.toBase64Data()  

          // bitmap.save('_doc/b.png',   
          // {  "overwrite": false,  "format": "png",  "quality": 50  },   
          // function(e){  
          //   //保存到相册  
          //   plus.gallery.save(e.target,(e)=>{  
          //     plus.nativeUI.toast("保存成功")  
          //   })  
          // }, function(error){  
          //   plus.nativeUI.toast("保存失败")  
          //   console.log("code:" + error.code + ";msg:" + error.message)  
          // })  

          //保存到相册后,回收Bitmap图片内存    
          bitmap.recycle();    
        },function(e){  
            console.log('截屏绘制图片失败:'+JSON.stringify(e));  
        });  
      },  

        }  
    }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .logo {  
        height: 200rpx;  
        width: 200rpx;  
        margin-top: 200rpx;  
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 50rpx;  
    }  

    .text-area {  
        display: flex;  
        justify-content: center;  
    }  

    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
</style>  
0 关注 分享

要回复文章请先登录注册