HelloZhong
HelloZhong
  • 发布:2018-01-29 11:27
  • 更新:2020-10-16 09:56
  • 阅读:1752

截屏绘制的设置截屏区域(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 负责人:无 分享
已邀请:
百倍

百倍

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  
	});  
}
HelloZhong

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

e***@163.com

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

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