截屏绘制的设置截屏区域（clip）在ios没起作用...

分类：HTML5+

想动态生成一张分享的海报，看到了plus.webview.draw方法就试了一下，在安卓下正常，但在ios设置的截屏区域好像没有效果，默认截了全屏，请问有解决方法吗？还是我操作不当...

window.drawIMG = function(t, info, cb){  
    var wa = null;  
    if(t === 1) wa = 'poster-goods.html';  
    else if(t === 2) wa = 'poster-album.html';  
    else if(t === 3) wa = 'poster-app.html';  

    if(!wa) return false;  
    var bitmap = new plus.nativeObj.Bitmap('poster');  
    var w = plus.webview.create(wa, 'page-draw', {  
        backButtonAutoControl: 'close',  
        height: '450px',  
//      subNViews: [{  
//          id: 'drawNView',  
//          styles: {  
//              top: '10px',  
//              left: '5px',  
//              height: '310px',  
//              width: '310px'  
//          },  
//          tags: [{  
//              id: 'drawBG',  
//              tag: 'img',  
//              src: info.mainPic,  
//              sprite: {height: '100%', width: 'auto'}  
//          }]  
//      }]   
    }, {extras: info});  
    w.addEventListener('loaded', function(){  
        setTimeout(function(){  
            w.draw(bitmap, function(){  
                var t = new Date().getTime();  
                bitmap.save('_doc/poster/poster' + t + '.jpg', {quality: 100}, function(e){  
                    if(cb) cb(e.target);  
                    plus.nativeUI.closeWaiting();  
                    bitmap.clear()  
                }, function(e){  
                    console.log(e.message)  
                })  
            }, function(e){  
                console.log(e.message)  
            }, {   
                check: true,  
                clip: {top: '0px', width: '320px', height: '200px'}  
            })  
        }, 1000)  
    })  
}

2018-01-29 11:27 负责人:无分享

3 个回复

百倍

Android机型，截图正常
iOS机型，bitmap.save时，clip的top参数无效，但在plus.webview.currentWebview().draw时，是有效的。
源码示例 https://blog.csdn.net/qq285679784/article/details/109001187

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title></title>  
        <link href="css/mui.min.css" rel="stylesheet" />  
    </head>  
    <body>  
        <div>  
            <img src="http://p1.bqimg.com/567571/cedca293f269ba11.jpg" width="100%" />  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
            <p>dddd</p>  
        </div>  
        <script src="js/mui.min.js"></script>  
        <script src="js/drawScreen.js"></script>  
        <script type="text/javascript" charset="utf-8">  
            mui.init();  
            mui.plusReady(function() {  

                // 截屏图片比例 5:4  
                let descWidth = document.body.clientWidth;  
                let descHeight = descWidth / (5 / 4);  

                var options = {  
                    successCB: function(e) {  
                        console.log(JSON.stringify(e))  
                    },  
                    errorCB: function(e) {  
                        console.log(JSON.stringify(e))  
                    },  
                    quality: 80,  
                    clip: {  
                        top: '20px',  
                        left: '0px',  
                        width: descWidth,  
                        height: descHeight  
                    }  
                }  

                drawScreen(options);  
            });  
        </script>  
    </body>  
</html>


/*     drawScreen.js  
    参数说明：  
    参数名     类型         说明                               默认值         是否必选  
    successCB |  Function  | 成功回调函数                 |               |   Y  
    errorCB   |  Function  | 失败,回调函数                    |   Function    |     
    fileName  |  String    | 文件名,不需后缀名              |   当前时间戳   |     
    imgID     |  String    | 原生图片ID                     |   当前时间戳   |     
    overwrite |  Boolean   | 是否覆盖                       |   true        |     
    format    |  String    | 保存的格式                      |   PNG         |     
    quality   |  Number    | 保存质量,1-100,1最低,100最高   |   50          |     
    clip      |  Object    | 指定截屏区域                 |   {top:’0px’,left:’0px’,width:’100%’,height:’100%’}     
*/  

var drawScreen = function(options) {  
    options = {  
        successCB: options.successCB || function() {},  
        errorCB: options.errorCB || function() {},  
        fileName: options.fileName || Date.parse(new Date()),  
        imgID: options.imgID || String(Date.parse(new Date())),  
        overwrite: options.overwrite || true,  
        format: options.format || 'jpg',  
        quality: options.quality || 50,  
        clip: options.clip || {  
            top: '0px',  
            left: '0px',  
            width: '100%',  
            height: '100%'  
        }  
    }  
    var self = plus.webview.currentWebview();  
    var bitmap = new plus.nativeObj.Bitmap(options.imgID);  

    //绘制截图  
    self.draw(bitmap, function() {  
        // 保存Bitmap图片  
        bitmap.save('_doc/' + options.fileName + '.' + options.format, {  
            overwrite: options.overwrite,  
            format: options.format,  
            quality: options.quality,  
            clip: options.clip  //iOS机型，bitmap.save时，clip的top参数无效，但在self.draw时，是有效的。  
        }, function(i) {  
            //销毁Bitmap图片  
            bitmap.clear();  
            options.successCB({  
                success: 'success',  
                details: i.target  
            });  
        }, function(e) {  
            bitmap.clear();  
            options.errorCB({  
                error: '图片保存失败',  
                details: e  
            });  
        });  

    }, function(e) {  
        options.errorCB({  
            error: '截屏绘制失败',  
            details: e  
        });  
    },{  
        clip: options.clip //绘制截图时，设置clip，解决iOS机型下clip-top无效bug  
    });  
}

2***@qq.com

完美解决赞

2022-03-08 18:15

HelloZhong (作者)

已解决。
bitmap的save方法也有个clip的options，在这里设置会生效。那么统一在这里设置就好了

s***@aliyun.com

bitmap.save方法确实可以实现区域截屏的功能，但是在iPad上，top值有问题，会往下移150像素左右，而且设置还比较混乱。当设置为整数时，不论设置多少，都会往下移；当设置为负数或auto时，截取的就是全屏，这时left，width，height这些值也都不起作用了。

2019-10-17 11:05
s***@kunhuatech.com

回复 s***@aliyun.com: 你好，请问这个top问题解决了吗？同问。

2019-11-14 15:02
s***@aliyun.com

回复 s***@kunhuatech.com: 没解决呢

2019-12-19 09:51

e***@163.com

我的问题是ios下clip的top值根本无效安卓没问题

该问题目前已经被锁定, 无法添加新回复

截屏绘制的设置截屏区域（clip）在ios没起作用...

3 个回复

公告

相关问题

截屏绘制的设置截屏区域（clip）在ios没起作用...

与内容相关的链接

3 个回复

公告

相关问题