利用html2canvas截屏后可以生成base64类型的图片,但是这样的图片很明显不能被引用或者被SNS工具来分享。这样就必须截屏后再上传数据到后台服务器端重新保存。
前端js代码:
$("#saveImage").click(function() {
html2canvas($('#mypics'), {
onrendered : function(canvas) {
var myImage = canvas.toDataURL("image/jpeg");
//并将图片上传到服务器用作图片分享
$.ajax({
type : "POST",
url : '${ctx}/qsupload',
data : {data:myImage},
timeout : 60000,
success : function(data){
$('#myShowImage').attr('src', '${ctxStatic}/usertemp/'+data+'.jpg'); //服务器上保存图片路径,data是返回的文件名。
}
});
}
});
});
后端代码
import org.apache.commons.codec.binary.Base64;
@RequestMapping(value = { "${frontPath}/qsupload" }, method = { RequestMethod.POST })
@ResponseBody
public String petUpgradeTarget(HttpServletRequest request, String data) {
String serverPath = request.getSession().getServletContext()
.getRealPath("/");
Base64 base64 = new Base64();
try {
//注意点:实际的图片数据是从 data:image/jpeg;base64, 后开始的
byte[] k = base64.decode(data.substring("data:image/jpeg;base64,"
.length()));
InputStream is = new ByteArrayInputStream(k);
String fileName = UUID.randomUUID().toString();
String imgFilePath = serverPath + "\\static\\usertemp\\" + fileName + ".jpg";
//以下其实可以忽略,将图片压缩处理了一下,可以小一点
double ratio = 1.0;
BufferedImage image = ImageIO.read(is);
int newWidth = (int) (image.getWidth() * ratio);
int newHeight = (int) (image.getHeight() * ratio);
Image newimage = image.getScaledInstance(newWidth, newHeight,
Image.SCALE_SMOOTH);
BufferedImage tag = new BufferedImage(newWidth, newHeight,
BufferedImage.TYPE_INT_RGB);
Graphics g = tag.getGraphics();
g.drawImage(newimage, 0, 0, null);
g.dispose();
ImageIO.write(tag, "jpg", new File(imgFilePath));
return fileName;
} catch (Exception e) {
return "error";
}
}
分享到:
相关推荐
htm2Canvas实现网页截图功能,包括demo。
解决htmlcanvas手机无法截图或者截图不全的问题,解决后在手机或者pc上截图效果非常的好。主要解决img对象转换为base64的问题
html2canvas可以截图指定dom元素,但是dom元素中如果含有svg会导致截图不完整,例如使用jsPlumb流程图,其中连线无法截图,所以结合了canvg可以完整截图
html2canvas实现js截图+模拟摄像头拍照,内含html2canvas.js和canvas2Image.js源码
html2canvas 能够实现在浏览器端、app端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现。
html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现。 它不需要来自服务器任何渲染,整张图片...
利用javascript实现页面截图(html2canvas.js资源) 用法: html2canvas(document.body, { allowTaint: true, taintTest: false, onrendered: function(canvas) { canvas.id = "mycanvas"; //document.body....
屏幕截图基于 DOM,因此可能不是 100% 准确到真实表示,因为它不会制作实际的屏幕截图,而是根据页面上可用的信息构建屏幕截图。 2.它只能正确渲染它理解的属性,这意味着有许多 CSS 属性不起作用; html2canvas官网...
HTML2canvas截图
html2canvas 网页对图片加水印
html2canvas 包噢噢
html2canvas改过后的插件
微信小程序使用canvas绘图并且把图片上传到服务器上面
h5canvas截屏,解决了截频模糊,图片缺失,位置不对一些问题
html2canvas生成图片案例,如不想下载可查看本人博客 https://blog.csdn.net/dream0129/article/details/86983023
我是在html2canvas官网http://html2canvas.hertzen.com/下载的js文件 在实际使用的时候发现其init方法只是将document转换为了canvas,并没有保存为图片这一步。 所以我在此基础上进行了扩展,可以调用我封装的方法...
通过 html2canvas对video视频点击按钮进行截取视频图片,获取base64图片
一个简单的利用html2canvas 根据Dom元素在前端实现自由截图
为大家介绍一款JS截图插件html2canvas.js,它可以通过纯JS对浏览器端经行截屏,下面就为大家介绍一下html2canvas.js属性和具体使用方法,并为大家提供了一个实例
使用html2canvas实现图片截图并保存至本地或在页面中以canvas的方式渲染