html 图片取消纵横比,html2canvas图像纵横比不正确

我正在练习使用html2canvas图像纵横比不正确

HTML正文:

frame_37.png

transfer

的Javascript块:

$(document).ready(function(e) {

$("#button").on("click", function(event) {

html2canvas(document.body, {

allowTaint: true,

taintTest: false,

onrendered: function(canvas) {

var can = document.getElementById('thecanvas');

var destCtx = can.getContext('2d');

destCtx.drawImage(canvas, 0, 0);

}

});

});

});

CSS:

body { height:100%; width:100%; margin:0 !important;

padding:0 !important; overflow:hidden; }

#wrapper { width:100%; height:100%; position: absolute;}

#left { background-color: #dfdfdd; float:left; width:50%; height:100%; }

#right { background-color: #cdcdcd; float:left; width:50%; height:100%; }

#button { padding:20px; width:auto; height:auto; background:#00b1dc; }

#thecanvas { width:80%; height:80%; border:1px solid #fff; margin:10%; }

.littlebox { background:#fff; position:absolute; width:32px; height:32px; }

截图:

peQSl.png

2014-03-18

dabouncy

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值