<body>
<div class="app" id="app" v-cloak>
<div class="top_bg"></div>
<div class="middle_bg1"></div>
<div class="middle_bg2"></div>
</div>
<div class="pic" id="img">
<div class="save_tips">图片生成成功<br>长按可保存到本地或发送给好友</div>
</div>
</body>
js方法：
downLoad: function(){
var content = $('#app');
var _width = $('#app').width(),
_height = $('#app').height();
var canvas = document.createElement("canvas");
var scale = 5.5; //放大倍数
canvas.width = _width * scale;
canvas.height = _height * scale;
canvas.getContext("2d").scale(scale, scale);
$(".create_img").hide();
$(".info").css("top","0.4rem");
document.body.scrollTop = document.documentElement.scrollTop = 0;
var w = $('#app').outerWidth(),
h = $('#app').outerHeight();
html2canvas($('#app'),{
allowTaint: true,
useCORS: true,
scale: scale,
canvas: canvas,
width: _width,
heigth: _height,
dpi: window.devicePixelRatio * 96,
onrendered: function(canvas) {
document.body.appendChild(canvas);
$("canvas").hide();
convertCanvasToImage(canvas);
}
});
function convertCanvasToImage(canvas) {
var image = new Image();
image.setAttribute("crossOrigin",'Anonymous');
image.src = canvas.toDataURL();
$(".pic img").attr({"src":image.src});
$(".pic img").css("width","7.5rem");
$(".pic").show();
$("#app").hide();
return image;
}
}
}
