html2canvas 下载链接 https://github.com/niklasvh/html2canvas/releases
<script src="/js/html2canvas/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
<script>
//将图片转为 base64
function getBase64Image(img) {
img.crossOrigin = 'Anonymous';
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/jpeg");
return dataURL;
}
//递归将要转换的节点中的所有图片的src全部转为base64
var s = 0;
image2base64(s);
function image2base64() {
var image = new Image();
image.src = $(".share_b img").eq(s).attr('src');
console.log(image.src);
image.onload = function() {
var base64 = getBase64Image(image);
$(".share_b img").eq(s).attr('src', base64);
s++;
if (s < $(".share_b img").length) {
image2base64();
}
}
}
//使用html2canvas将节点转为图片
$(function(){
$(".share_a").bind("click", function () {
html2canvas($(".share_b")).then(function(canvas) {
var imgUria = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
$(".share_img").attr('src', imgUria);
$(".share_img").css('display', 'block');
$(".share_bg").css('display', 'block');
});
})
});
</script>
以上。