songlipeng2003/gist:5967083

## gistfile1.phtml
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/base/jquery-ui.css" type="text/css" media="all" />
<style type="text/css">
body{
    margin: 0;
    padding: 0;
}

#root {
    position: relative;
    height: 50px;
}

#root img {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    position: absolute;
}

#content{
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 100;
    position: absolute;
}

#html{
    height: 100%;
    width: 100%;
    position: relative;
}

#html div{
    position: absolute;
}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
    var screenPPI = document.getElementById('ppitest').offsetWidth;

    $('#html div').draggable({
        containment: $('.html'),

        stop: function() {
            $('#html div').each(function(i, e){
                var element = $(e);
                var top = element.css('top');
                top = parseFloat(top);
                top = top/screenPPI;
                var left = element.css('left');
                left = parseFloat(left);
                left = left/screenPPI;

                element.css('top', top+'in');
                element.css('left', left+'in');
            });
        }
    });

    $('#file').on('change', function(ev) {
        var f = ev.target.files[0];
        var fr = new FileReader();

        fr.onload = function(ev2) {
            console.dir(ev2);
            $('#root img').attr('src', ev2.target.result);
        };

        fr.readAsDataURL(f);
    });

    $('#import').click(function(){
        var html = $('#html').html();
        html = html.replace(/class="ui-draggable"/g, '');
        html = html.replace(/style="/g, 'style="position:absolute;');
        var height = $('#height').val();
        var width = $('#width').val();

        html = '<div style="position: relative;height:'+height+';width:'+width+'">' + html + '</div>';

        alert(html);
    });

    $('#setting').click(function(){
        var height = $('#height').val();
        var width = $('#width').val();

        $('#root').css({
            height: height,
            width: width
        });
    });
});
</script>

<body>
<div id="ppitest" style="width:1in;visible:hidden;padding:0px"></div>
<div id="root">
    <img src=""/>
    <div id="content">
        <div id="html">
            <div>{$buyer_name}</div>
            <div>{$buyer_region_name}<br/>{$buyer_address}</div>
            <div>{$buyer_zip}</div>
            <div>{$buyer_phone}</div>
            <div>{$date}</div>
        </div>
    </div>
</div>
选择快递:<input id="file" type="file"><br/>
快递单长度（注意添加单位）：<input id="width" type="input"> 宽度：<input id="height" type="input"><button id="setting">设置</button><br/>
<button id="import">输出html</button>
</body>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/base/jquery-ui.css" type="text/css" media="all" />
	<style type="text/css">
	body{
	margin: 0;
	padding: 0;
	}

	#root {
	position: relative;
	height: 50px;
	}

	#root img {
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
	position: absolute;
	}

	#content{
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: 100;
	position: absolute;
	}

	#html{
	height: 100%;
	width: 100%;
	position: relative;
	}

	#html div{
	position: absolute;
	}
	</style>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
	<script type="text/javascript">
	$(function(){
	var screenPPI = document.getElementById('ppitest').offsetWidth;

	$('#html div').draggable({
	containment: $('.html'),

	stop: function() {
	$('#html div').each(function(i, e){
	var element = $(e);
	var top = element.css('top');
	top = parseFloat(top);
	top = top/screenPPI;
	var left = element.css('left');
	left = parseFloat(left);
	left = left/screenPPI;

	element.css('top', top+'in');
	element.css('left', left+'in');
	});
	}
	});

	$('#file').on('change', function(ev) {
	var f = ev.target.files[0];
	var fr = new FileReader();

	fr.onload = function(ev2) {
	console.dir(ev2);
	$('#root img').attr('src', ev2.target.result);
	};

	fr.readAsDataURL(f);
	});

	$('#import').click(function(){
	var html = $('#html').html();
	html = html.replace(/class="ui-draggable"/g, '');
	html = html.replace(/style="/g, 'style="position:absolute;');
	var height = $('#height').val();
	var width = $('#width').val();

	html = '<div style="position: relative;height:'+height+';width:'+width+'">' + html + '</div>';

	alert(html);
	});

	$('#setting').click(function(){
	var height = $('#height').val();
	var width = $('#width').val();

	$('#root').css({
	height: height,
	width: width
	});
	});
	});
	</script>

	<body>
	<div id="ppitest" style="width:1in;visible:hidden;padding:0px"></div>
	<div id="root">
	<img src=""/>
	<div id="content">
	<div id="html">
	<div>{$buyer_name}</div>
	<div>{$buyer_region_name}<br/>{$buyer_address}</div>
	<div>{$buyer_zip}</div>
	<div>{$buyer_phone}</div>
	<div>{$date}</div>
	</div>
	</div>
	</div>
	选择快递:<input id="file" type="file"><br/>
	快递单长度（注意添加单位）：<input id="width" type="input"> 宽度：<input id="height" type="input"><button id="setting">设置</button><br/>
	<button id="import">输出html</button>
	</body>