Here is the script I am using
<script src=".min.js"></script>
<script>window.jQuery||document.write('<script src="js/jquery-1.7.1.min.js"><\/script>');</script>
<script type="text/javascript" src=".js?rev032"></script>
<script type="text/javascript">
var date=new Date();
var message,timeoutTimer,timer;
var proxyUrl="";
function addRow(a,c,d){var b=$("<tr />").appendTo($(a));b.append($("<td />").css("font-weight","bold").text(c)).append($("<td />").text(d))}
function throwMessage(b,a){
window.clearTimeout(timeoutTimer);
timeoutTimer=window.setTimeout(function(){
message.fadeOut(function(){message.remove()})
},
a||2000);
$(message).remove();
message=$("<div />").html(b).css({
margin:0,
padding:10,
background:"#000",
opacity:0.7,
position:"fixed",
top:10,right:10,
fontFamily:"Tahoma",
color:"#fff",
fontSize:12,
borderRadius:12,
width:"auto",
height:"auto",
textAlign:"center",
textDecoration:"none"
}).hide().fadeIn().appendTo("body");
}
$(function(){$("#remended a").click(function(c){
c.preventDefault();
$("#url").val(this.href);
$("button").click()
});
var a,b;$('input[type="button"]').click(function(){$(a.contentWindow).unbind("load");$(a).contents().find("body").html2canvas({canvasHeight:b.body.scrollHeight,canvasWidth:b.body.scrollWidth,logging:true})});
$("#getscreenshot").click(function(d){
d.preventDefault();
$(this).prop("disabled",true);
var c=$("#url").val();
$("#content").append($("<img />").attr("src",".gif").css("margin-top",40));
var f=document.createElement("a");
f.href=c;
$.ajax({
data:{xhr2:false,url:f.href},url:proxyUrl,dataType:"jsonp",success:function(e){
a=document.createElement("iframe");
$(a).css({visibility:"hidden"}).width($(window).width()).height($(window).height());
$("#content").append(a);
b=a.contentWindow.document;
b.open();$(a.contentWindow).load(function(){
var g=$(a).contents().find("body"),h={onrendered:function(j){
$("#content").empty().append(j);
$("#getscreenshot").prop("disabled",false);
$("base").attr("href","")
},
allowTaint:true,
taintTest:false,
flashcanvas:"src/flashcanvas.min.js"},
i=html2canvas(g,h)
});
$("base").attr("href",f.protocol+"//"+f.hostname+"/"+f.pathname);
e=e.replace("<head>","<head><base href='"+f.protocol+"//"+f.hostname+"/"+f.pathname+"' />");
if($("#disablejs").prop("checked")){
e=e.replace(/\<script/gi,"<!--<script");
e=e.replace(/\<\/script\>/gi,"<\/script>-->")
}
b.write(e);b.close()
}
});
})
});
</script>
HTML
<h1>Html2Canvas javaScript screenshot creator</h1>
<form class="well form-search"> <label for=url>Website URL:</label>
<input type=url id=url value="" class="input-medium search-query"/><button class=btn id=getscreenshot>Get screenshot!</button>
</form>
<label for="disablejs">Disable JavaScript (remended, doesn't work well with the proxy)</label>
<input id="disablejs" type="checkbox" checked="">
<br>
<div id=content></div> <!-- Image will be displayed here-->
now it is generating screenshot of html body content
I need to resize the image and (store in/upload to) local server
Here is the script I am using
<script src="http://code.jquery./jquery.min.js"></script>
<script>window.jQuery||document.write('<script src="js/jquery-1.7.1.min.js"><\/script>');</script>
<script type="text/javascript" src="http://html2canvas.hertzen./js/html2canvas.js?rev032"></script>
<script type="text/javascript">
var date=new Date();
var message,timeoutTimer,timer;
var proxyUrl="http://html2canvas.appspot.";
function addRow(a,c,d){var b=$("<tr />").appendTo($(a));b.append($("<td />").css("font-weight","bold").text(c)).append($("<td />").text(d))}
function throwMessage(b,a){
window.clearTimeout(timeoutTimer);
timeoutTimer=window.setTimeout(function(){
message.fadeOut(function(){message.remove()})
},
a||2000);
$(message).remove();
message=$("<div />").html(b).css({
margin:0,
padding:10,
background:"#000",
opacity:0.7,
position:"fixed",
top:10,right:10,
fontFamily:"Tahoma",
color:"#fff",
fontSize:12,
borderRadius:12,
width:"auto",
height:"auto",
textAlign:"center",
textDecoration:"none"
}).hide().fadeIn().appendTo("body");
}
$(function(){$("#remended a").click(function(c){
c.preventDefault();
$("#url").val(this.href);
$("button").click()
});
var a,b;$('input[type="button"]').click(function(){$(a.contentWindow).unbind("load");$(a).contents().find("body").html2canvas({canvasHeight:b.body.scrollHeight,canvasWidth:b.body.scrollWidth,logging:true})});
$("#getscreenshot").click(function(d){
d.preventDefault();
$(this).prop("disabled",true);
var c=$("#url").val();
$("#content").append($("<img />").attr("src","http://html2canvas.hertzen./loading.gif").css("margin-top",40));
var f=document.createElement("a");
f.href=c;
$.ajax({
data:{xhr2:false,url:f.href},url:proxyUrl,dataType:"jsonp",success:function(e){
a=document.createElement("iframe");
$(a).css({visibility:"hidden"}).width($(window).width()).height($(window).height());
$("#content").append(a);
b=a.contentWindow.document;
b.open();$(a.contentWindow).load(function(){
var g=$(a).contents().find("body"),h={onrendered:function(j){
$("#content").empty().append(j);
$("#getscreenshot").prop("disabled",false);
$("base").attr("href","")
},
allowTaint:true,
taintTest:false,
flashcanvas:"src/flashcanvas.min.js"},
i=html2canvas(g,h)
});
$("base").attr("href",f.protocol+"//"+f.hostname+"/"+f.pathname);
e=e.replace("<head>","<head><base href='"+f.protocol+"//"+f.hostname+"/"+f.pathname+"' />");
if($("#disablejs").prop("checked")){
e=e.replace(/\<script/gi,"<!--<script");
e=e.replace(/\<\/script\>/gi,"<\/script>-->")
}
b.write(e);b.close()
}
});
})
});
</script>
HTML
<h1>Html2Canvas javaScript screenshot creator</h1>
<form class="well form-search"> <label for=url>Website URL:</label>
<input type=url id=url value="http://www.google.co.in" class="input-medium search-query"/><button class=btn id=getscreenshot>Get screenshot!</button>
</form>
<label for="disablejs">Disable JavaScript (remended, doesn't work well with the proxy)</label>
<input id="disablejs" type="checkbox" checked="">
<br>
<div id=content></div> <!-- Image will be displayed here-->
now it is generating screenshot of html body content
I need to resize the image and (store in/upload to) local server
Share Improve this question edited Feb 8, 2018 at 16:00 Cœur 38.8k25 gold badges206 silver badges278 bronze badges asked Jul 20, 2012 at 10:56 mrsrinivasmrsrinivas 35.5k13 gold badges133 silver badges130 bronze badges 2- 1 Not sure if that'll help, but if you can get the src as Base64 encoded string then all you need to do is save it to a file. – Ignas Commented Jul 20, 2012 at 11:00
- @Ignas: Ya if we right click on the image and select "View" we are getting base64 encoded src. But no idea where we can got that dynamically – mrsrinivas Commented Jul 20, 2012 at 11:06
2 Answers
Reset to default 2What you need to do is send the source of the image to the server either by using ajax or by submiting a form. To get the source use something like:
var src = $("#your-image").attr('src');
$.post(url, {'source':src}, function(data){});
And in the php:
$img = $_POST['source'];
file_put_contents('image_file', base64_decode($img));
Haven't tested the code but should get you on the right track.
Instead of sending the image to the server,this seems a good approach. We can draw the image on another canvas using the drawImage method.
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
sx ---- x coordinate where to start clipping
sy ---- y coordinate where to start clipping
swidth---- width of the clipped image
sheight---- height of the clipped image
x ---- x coordinate where to place the image on the canvas
y ---- y coordinate where to place the image on the canvas
width ---- width of the image to be used.
height ---- height of the image to be used.
After drawing on the canvas, we can get back the image source using "toDataURL".
finalImgSrc = mycanvas.toDataURL();
With the help of this image source, we can get the image element.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744764440a4592371.html
评论列表（0条）