javascript-html2canvas翻译

1.github地址:
	https://github.com/niklasvh/html2canvas

2.官网地址:
	https://html2canvas.hertzen.com

3.文档翻译:
	1>介绍
		在开始使用html2canvas之前,有必要了解它的相关内容以及局限性
		1)如何工作
			脚本遍历页面加载的所有DOM。收集页面所有元素的信息,之后利用获取到的元素的信息来重新构建页面的一个 "表示形式"。换句话说,html2canvas并不是真实的对页面进行截屏,而是根据获取到的页面的DOM属性,来重新构建页面的一个 "表示形式" 而已。
			因此,html2canvas只能正确的渲染它目前支持的一些属性,意味着有很多 "CSS属性" ,html2canvas可能不支持!
		2)限制
			1.当没有代理时,要求页面所有的图片,不能跨域!
			2.类似的,页面上如果有其他canvas,且该canvas跨域获取内容,则被html2canvas标识为 "已污染",也是不可读的!
			3.不支持Flash和Java applets
			4.不支持iframe标签

	2>开始使用
		使用很简单,要渲染的DOM + 传递参数对象
			html2canvas(element, options);
			html2canvas(element, {
				onrendered: function(canvas){	// canvas 是最终渲染的 <canvas> 元素

				}
			});
		可用的参数:
			allowTaint - 是否允许 '跨域图片' 污染canvas(boolean类型:默认值false)
			background - 当渲染的DOM未指定'background',设置canvas背景色。如需背景透明,设置 'undefined'。(string类型:默认值 '#fff')
			width - 设置canvas的宽度,单位为 'px'。设置为 'null',使用窗口的宽度。(number类型:默认值null)
			height - 设置canvas的高度,单位为 'px'。设置为 'null',使用窗口的高度。(number类型:默认值null)
			letterRendering - 是否分别渲染每一个单词。如果使用了 'letter-spacing',则需要设置该值为true。(boolean类型:默认值 false)
			logging - 在控制台中,记录事件。(boolean类型:默认值 false)
			proxy - 用于加载跨域图片,设置 '代理'。设置为空(''),将不会加载跨域图片。(string类型:默认值 undefined)
			taintTest - 在绘制每一幅图片之前,是否测试图片,以防污染canvas。(其实就是检测每幅图片是否跨域)(boolean类型:默认值 true)
			timeout - 设置加载图片的超时时间,单位是 '毫秒'。设置为 '0',永不超时。(number类型:默认值 0)
			useCORS - 是否尝试,在 '使用proxy功能' 之前,加载跨域图片,作为 'CORS' 服务(CORS - Cross-origin resource sharing - 跨域资源共享)(boolean类型:默认值 false)

4.github readme.md翻译:
	html2canvas脚本允许我们直接在用户浏览器上,对整个网页或部分网页进行截屏。截屏是基于DOM的,它并非是对实际的屏幕截图,因此可能并非100%精确,基于页面上的可用信息,而构建屏幕截图。

	不需要从服务器进行任何的渲染,整个图像是在客户机浏览器上的渲染的。因为严重依赖浏览器,所以不支持 nodejs。它也不会神奇地绕过任何浏览器内容策略限制,因此渲染跨域内容,需要代理服务器支持!

	脚本仍然处于一个非常实验的状态,所以我不建议在生产环境中使用它,也不要开始用它来构建应用程序,因为仍然会有主要的更改。

	浏览器兼容性:
		Firebox 3.5+
		Google Chrome
		Opera 12+
		IE9+
		Safari 6+
		注意:
			因为每个CSS属性,需要手动构建来支持,有很多属性目前并未支持!!!(所以,很可能各种不准确!)

	使用:
		新版的html2canvas,已经使用了 'Promise',如果想在旧版本支持 'Promise',可在引入 'html2canvas' 前,使用 'es6-promise'。

		es6-promise github地址:
			https://github.com/stefanpenner/es6-promise

	新版使用:
		html2canvas(document.body, options).then(function(canvas){
			document.body.appendChild(canvas);
		});

	旧版使用:
		html2canvas(document.body, {
			onrenderd: function(canvas){
				document.body.appendChild(canvas);
			},
			width: xx,	
			...	// other options
		});


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值