picture upload view and html2canvas

input type="file" id="file" name="imgfile" style="display:none;" οnchange="filechange(event)">

<img src="" style="width:170px;height:70px;border:1px solid #c9c9c9;cursor:pointer" id="img-change">

$("#img-change").click(function () {
        $("#file").click();
    })
    /*$("#file").change(function (event) {*/
    var filechange=function(event){
        var files = event.target.files, file;
        if (files && files.length > 0) {
            // 获取目前上传的文件
            file = files[0];// 文件大小校验的动作
            if(file.size > 1024 * 1024 * 3) {
                alert('图片大小不能超过 3MB!');
                return false;
            }
            // 获取 window 的 URL 工具
            var URL = window.URL || window.webkitURL;
            // 通过 file 生成目标 url
            var imgURL = URL.createObjectURL(file);
            //用attr将img的src属性改为获得的url
            $("#img-change").attr("src",imgURL);
            // 使用此句可以在内存中释放对此 url ,之后那个 URL 就无效了
            // URL.revokeObjectURL(imgURL);
        }
    };

html2canvas截图

<a style="float:right;margin-right:10px;cursor:pointer" id="down_button"><img src="__PUBLIC__/pic/camera1.jpg" style="width:20px;padding-top:10px;" /></a>

<script src="__PUBLIC__/html2canvas/build/html2canvas.js"></script>

$(function() {
        html2canvas($("#myCanvas"), {
            onrendered:function(canvas) {
                $('#down_button').attr('href', canvas.toDataURL());
                $('#down_button').attr('download', 'rechargescreen.png');
                var html_canvas = canvas.toDataURL();
                $.post('', {
                    order_id: 1,
                    type_id: 2,
                    html_canvas: html_canvas
                },function(json) {}, 'json');
            }
        });
    });




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值