视频html代码转换成图片不显示不出来的,html2canvas 保存网页截图 图片不显示

问题描述

两张图片，一张是用户上传的图片，另一张是模板图，中间是透明的，可以制作相框，并保存。使用html2canvas对两个img标签进行截图。在写demo的时候html2canvas没有报错但是所截的是空白，若换成文字就可以。

原因分析

找了半天才知道，如果截图部分包含图片的话，程序必须放在服务器下面进行，不然的话就是空图片。

It will not work if you run this html file without any web server . If you are playing around on your PC then install XAMPP or any other web server (Easiest option http://www.apachefriends.org/en/xampp.html) and put the image ,JavaScript and HTML code in C:\xampp\htdocs (if C dirive is your installation drive) and run using the server. I have tested it in Chrome and its working.

##代码实例

Document

img{

width: 500px;

height: 300px;

position: fixed;

}

#div1{

height: 500px;

width: 100%;

}

#div2{

position: fixed;

bottom: 0;

background: red;

}

html2canvas($('#div1'), {

onrendered: function(canvas) {

var oImgPNG = Canvas2Image.saveAsPNG(canvas, true);

$('#div1').hide();

$('#div2').html(oImgPNG);

},

width: 500,

height: 500

});

效果展示

没有服务器谷歌浏览器下

没有服务器火狐浏览器下