• 781 阅读
  • 4 回复

html2canvas - 百度在用的 [置顶]

视频在线上传+队列转换FLV+水印+捉图+修复+获时+转3GP(API语言不限,开视频站必备!)
本主题由 张小鱼 于 2014/9/12 14:04:00 执行 设置置顶 [查看记录]
您是游客您没有权限查看该图片

您是游客您没有权限查看该图片



您是游客您没有权限查看该图片





百度的JS格式化后
sdfasdf.js (您是游客您没有权限下载)
本帖最后由 张小鱼 于 2014-09-12 14:26 编辑
小鱼的淘宝店铺-多多支持哇

html2canvas插件对整个网页或者网页某一部分截图并保存为图片

视频在线上传+队列转换FLV+水印+捉图+修复+获时+转3GP(API语言不限,开视频站必备!)
http://www.cnblogs.com/zhubenshuli/archive/2013/12/02/html2canvas.html
小鱼的淘宝店铺-多多支持哇

html2canvas 截屏后上传入服务器端(springmvc3)

视频在线上传+队列转换FLV+水印+捉图+修复+获时+转3GP(API语言不限,开视频站必备!)
html2canvas 截屏后上传到服务器端(springmvc3)
   利用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";
  }
 }
小鱼的淘宝店铺-多多支持哇

Javascript保存网页为图片

视频在线上传+队列转换FLV+水印+捉图+修复+获时+转3GP(API语言不限,开视频站必备!)
第一步,把网页保存为Canvas画布,借助于html2canvas库,http://html2canvas.hertzen.com/

代码 复制 - 运行

html2canvas(document.getElementById("id1"), {
  onrendered: function(canvas) {
    document.getElementById("id2").appendChild(canvas);//生成画布后如何处理,当然可以在新标签打开,在浮层展示等等
  },
  canvas_id: 'canvas'//通过修改html2canvas源码添加canvas的id
});



Note:html2canvas()第一个参数为要生成canvas的区域,如果整个网页生成canvas,则是document.body。第二个参数详见官网设置canvas的各种属性,当然修改源代码可以添加自己想要的属性,如给canvas添加id等。

第二步,把第一步中生成的canvas保存成图片

代码 复制 - 运行

var canvas = document.getElementById("<span style="font-family: Arial, Helvetica, sans-serif;">canvas"</span><span style="font-family: Arial, Helvetica, sans-serif;">),</span>
    url = canvas.toDataURL();//
//以下代码为下载此图片功能
var triggerDownload = $("<a>").attr("href", url).attr("download", "img.png").appendTo("body");
triggerDownload[0].click();
triggerDownload.remove();

这里关注toDataURL()方法即可,可以把canvas转化成data形式的图片url,把这个url赋给<img/>标签即可显示图片,代码中其他部分为自己需要的下载功能。
http://blog.csdn.net/zk437092645/article/details/23779497

小鱼的淘宝店铺-多多支持哇

HTML2CANVAS插件对整个网页或者网页某一部分截图并保存为图片

视频在线上传+队列转换FLV+水印+捉图+修复+获时+转3GP(API语言不限,开视频站必备!)

html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个脚本将当前页面渲染成一个canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现。它不需要来自服务器任何渲染,整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时,将采用Flashcanvas或ExplorerCanvas技术代替实现。以下浏览器能够很好的支持该脚本:Firefox 3.5+, Google Chrome, Opera新的版本, IE9以上的浏览器。

如果你想将网页的某一部分或者全部进行截图从而来生成图片保存,那么html2canvas将会是一个很好的选择!

以下是html2canvas的使用教程:
1.使用jquery插件html2canvas对网页的某一部分截图(根据元素节点,比如id什么的)。
2.将截图到的canvas标签通过toDataURL()方法转成可以传输的base64编码post给后台服务器处理。
3.在后台服务器对传递过来的base64编码处理得到图像并保存。
代码:
1.引用jquery插件

代码 复制 - 运行

<script src="/js/html2canvas.js" type="text/javascript"></script>

2.截图通过ajax传输

代码 复制 - 运行

<script type="text/javascript">
    function howuse(){
      html2canvas(document.getElementById('email_content'), {
         onrendered: function(canvas){
            var html_canvas = canvas.toDataURL();
            $.post('/report/send_rep_submit', {html_canvas:html_canvas}, function(json){
                }, 'json');
            }
        });
    }
  </script>

3.后台服务器处理

代码 复制 - 运行

public function send_rep_submit() {
        $html_canvas = $this->input->post('html_canvas');
        $image = base64_decode(substr($html_canvas, 22));
        header('Content-Type: image/png');
        $filename = "images/report/" . $id . ".png";
        $fp = fopen($filename, 'w');
        fwrite($fp, $image);
        fclose($fp);
    }




小鱼的淘宝店铺-多多支持哇