javascript 调整大小并保存 html2canvas 生成的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11577908/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
resize and save html2canvas generated image
提问by mrsrinivas
Here is the script I am using
这是我正在使用的脚本
<script src="http://code.jquery.com/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.com/js/html2canvas.js?rev032"></script>
<script type="text/javascript">
var date=new Date();
var message,timeoutTimer,timer;
var proxyUrl="http://html2canvas.appspot.com";
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(){$("#recommended 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.com/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
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 (recommended, 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
现在它正在生成 html 正文内容的屏幕截图
I need to resize the image and (store in/upload to) local server
我需要调整图像大小和（存储/上传到）本地服务器
采纳答案by Mohanesh
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.
这似乎是一个不错的方法，而不是将图像发送到服务器。我们可以使用 drawImage 方法在另一个画布上绘制图像。
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.
sx ---- x 坐标从哪里开始剪裁
sy ---- y 坐标从哪里开始剪裁
swidth---- 剪裁图像的宽度
sheight----剪裁图像的高度
x ---- x 坐标在哪里将图像放置在画布上
y ---- y 坐标在画布上放置图像的位置
width ---- 要使用的图像的宽度。
height ---- 要使用的图像的高度。
After drawing on the canvas, we can get back the image source using "toDataURL".
在画布上绘制后，我们可以使用“ toDataURL”取回图像源。
finalImgSrc = mycanvas.toDataURL();
With the help of this image source, we can get the image element.
借助这个图像源，我们可以获得图像元素。
回答by Ignas
What 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:
您需要做的是通过使用 ajax 或提交表单将图像源发送到服务器。要获取源使用类似的东西：
var src = $("#your-image").attr('src');
$.post(url, {'source':src}, function(data){});
And in the php:
在 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.
尚未测试代码，但应该能让您走上正轨。
