将HTML内容写入Canvas生成图片

html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个脚本将当前页面渲染成一个Canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现。

它不需要来自服务器任何渲染,整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时,将采用Flashcanvas或ExplorerCanvas技术代替实现。以下浏览器能够很好的支持该脚本:Firefox 3.5+, Google Chrome, Opera新的版本, IE9以上的浏览器。

20110820223646_656

示例: http://html2canvas.hertzen.com/screenshots.html

html2canvas可以通过获取HTML的某个元素,然后生成Canvas,能让用户保存为图片。

这个项目主要是生成canvas,那么我们如果需要生成图片还需要将它转化为图片地址。然后生成,下面这个就是一个修复。

/**
  @license html2canvas v0.34 <http://html2canvas.hertzen.com>
  Copyright (c) 2011 Niklas von Hertzen. All rights reserved.

http://www.twitter.com/niklasvh

  Released under MIT License
 */
/*
 * jQuery helper plugin for examples and tests
 */
(function( $ ){
    $.fn.html2canvas = function(options,callback) {
        if (options && options.profile && window.console && window.console.profile) {
            console.profile();
        }
        options = options || {};

        options.onrendered = options.onrendered || function( canvas ) {
            var $canvas = $(canvas);

            if (options && options.profile && window.console && window.console.profileEnd) {
                console.profileEnd();
            }
        

            // test if canvas is read-able
            try {
                var imgData = $canvas[0].toDataURL();
          		var w = $canvas[0].width,
          			h = $canvas[0].height;
                callback(imgData, w, h);
            } catch(e) {
                if ($canvas[0].nodeName.toLowerCase() === "canvas") {
                    // TODO, maybe add a bit less offensive way to present this, but still something that can easily be noticed
                    alert("Canvas is tainted, unable to read data");
                }
            }
        };

        html2obj = html2canvas(this, options);
    };
})( jQuery );

使用方法:

;$(document).ready(function(){
	$('.capture').click(function(){
		var target = $(this).attr('cmd');
		var st = $(document).scrollTop();
		console.log(st);
		$('#'+target).html2canvas({},function(imgData,w,h){
			if(target != 'all'){
				$('#'+target).find('.captureResult img').attr('src',imgData).ready(function(){
					$(document).scrollTop(st);
				}).removeClass('hidden');
			}else{
				window.open(imgData);
			}
		});
		return false;
	});
});

演示地址 项目下载

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原创文章:将HTML内容写入Canvas生成图片 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/html2canvas.html)

发表评论

请登录后发表评论: