贴代码吧
var img = new Image();
img.src = canvas.toDataURL();
//找一个对象插入这个图片看一下有没有问题.
xxx.innerHTML = img;
<script src="/js/houbu/houbu.wap.js"></script>
<script>
HB.importres(["base", "inc", "/js/manage/html2canvas.js","/js/manage/canvas2image.js"]);
HB.ready = function () {
var img = $("#headImg").attr("src");
var image = new Image();
image.crossOrigin = "anonymous";
image.src = img;
image.onload = function(){
var base64 = getBase64Image(image);
$("#headImg").attr("src",base64);
}
};
//分享名片:社宾好友,链接;其他,转图片格式
function share(){
var dom=$("#shareImg"); //你要转变的dom
var width = dom.width();
var height = dom.height();
var type = "png";
var scaleBy = 1; //缩放比例
var canvas = document.createElement('canvas');
canvas.width = width * scaleBy;
canvas.height = height * scaleBy+180; //180是我处理完后发现短了一点,具体为什么不清楚,如果你也少的话,根据自己的项目调吧
canvas.style.width = width * scaleBy + 'px';
canvas.style.height = height * scaleBy + 'px';
var context = canvas.getContext('2d');
context.scale(scaleBy, scaleBy);
html2canvas(dom[0], {
canvas:canvas,
onrendered: function (canvas) {
var data=canvas.toDataURL("image/png");//生成的格式
var mm = data.split(",");
//mm[0]对应的值是:data:image/png;base64---->>截取image/png
var fileType = mm[0].split(":")[1].split(";")[0];
$("#images").removeClass("dn");
$("#images").attr("src",data);
}
});
}
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
var dataURL = canvas.toDataURL("image/"+ext);
return dataURL;
}
</script>
<div class="main-content pb60">
<div class="gc_headNav mb10">
<span class="head_left"><a href='javascript:history.go(-1);'><i class='icon-jiantou-copy'></i></a></span>
<span>我的名片</span>
<span class="head_right">
<div class='clearFix'>
<span class='f24 chui icon-send left'></span>
<a href='/m/settings/info' class='left ml16'>
<span class='icon-fabu f20 chui'></span>
</a>
</div>
</span>
</div>
<div class="pt40"></div>
<!-- start -->
<div id="shareImg">
<div class="w355 ma p5 fff">
<div class="back_f4f9 pl20 pb20 pt22 pb24 pu_r">
<div class="card_pic"><img id="headImg" src="http://img3.imgtn.bdimg.com/it/u=4215072988,1382169159&fm=26&gp=0.jpg" alt=""></div>
<p class="f20 c000" onclick="share()">XXX</p>
<p class="f14 c999 mt5">IT行业</p>
<p class="mt26"><span class="f24 c9b icon-dianhua-copy-copy"></span><span class="blue f16 ml8">18xxxxxxx78</span></p>
<p class="f16 c333 mt13"><span class="icon-gongsi f24 c9b"></span><span class="ml8">XXX有限公司</span></p>
<p class="f16 c333 mt13">
<span class="icon-weixin1 f24 c9b"></span>
<span class="ml8" id="wechatNo">546484</span>
<span class="icon-fuzhi f16 cd8 ml8" onclick="copy();"></span>
</p>
</div>
</div>
<ul class=" card_list clearFix fff mt10">
<li class="h60">
<div>
<p class="f14 c333">98</p>
<p class="f12 c999 mt4">引荐</p>
</div>
<div class="xian"></div>
</li>
<li class="h60">
<div>
<p class="f14 c333">101</p>
<p class="f12 c999 mt4">感恩</p>
</div>
<div class="xian"></div>
</li>
<li class="h60">
<div>
<p class="f14 c333">99</p>
<p class="f12 c999 mt4">探访</p>
</div>
<div class="xian"></div>
</li>
<li class="h60">
<div>
<p class="f14 c333">100</p>
<p class="f12 c999 mt4">见证</p>
</div>
</li>
</ul>
<div class="h52 lh52 fff mt10 bbe5_1">
<div class="w335 ma f16 c333">产品</div>
</div>
<div class="h60 flxa fff">
<div class="w335 ma f14 c666">XXXXXXX软件</div>
</div>
<div class="h52 lh52 fff mt10 bbe5_1">
<div class="w335 ma f16 c333">产品</div>
</div>
<div class="h60 flxa fff">
<div class="w335 ma f14 c666">XXXXXXX软件</div>
</div><div class="h52 lh52 fff mt10 bbe5_1">
<div class="w335 ma f16 c333">产品</div>
</div>
<div class="h60 flxa fff">
<div class="w335 ma f14 c666">XXXXXXX软件</div>
</div>
</div>
<!-- end -->
</div>
<div>
<img id="images" class="dn" src="">
</div>