web前端实现网页保存截图分享代码功能怎么实现

来源：蜘蛛抓取(WebSpider) 时间：2017-10-16 09:59 标签： 网页保存截图分享代码

今天跟大家网页保存截图分享代碼一个前端裁剪图片的方法.

许多网站都有设置用户头像的功能,用户可以选择一张本地的图片,然后用网站的裁剪工具进行裁剪,然后设置大小,位置合适的头像.当然,网上也有一些用js写的诸如此类裁剪的插件,但是有许多都是前端将图片的一些裁剪参数(如坐标)传给后台,有java程序员进行真囸的图片裁剪.今天自己研究了一些,做了一个纯前端裁剪的demo,如下:1.html部分: 

2.第二步进行文件选择后的预览操作
 

 
 
 
3.进行裁剪
注意到任务图像里面有一个藍色边框的选择框(大小固定,没有做缩放),将蓝色选框移动到你需要的位置,点击裁剪文件
 
 

 
 
 
4.将裁剪后的图片传给后台,并将返回的图片展示
 
 

 
 
 



                            

                                                    

                                

  

    

      

        现在有一个需求需要做一个视頻截图功能，并且需要在选中的区域内添加说明文字
      

      

        利用HTML5的canvas+JS可以保存视频某一帧为一张图片
      

      

        怎么在刚刚保存的那张图上。鼠标拖动选中┅区域可以输入文字然后再保存为图片。
      

    

  



                            

                                                

                    

                

            

            


            

                
我要回帖

                

                    

                        
                        
                    

                

            

            

                        

                
更多关于 网页保存截图分享代码 的文章

                

                    
                

            

                    

        

            

                
 

                


                

            

            

            

                
随机推荐