0
回答
jcrop插件的问题,第二次上传图片后,选框里面的还是第一张图片的缩影,求解决
利用AWS快速构建适用于生产的无服务器应用程序,免费试用12个月>>>   

jcrop第一次上传选框左右两边一致

第二次上传左右两边不一样,选框内的图片不同

<!DOCTYPE html>
<html lang="en">
<html>
<head>
	<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
	<link rel="stylesheet" href="demo_files/main.css" type="text/css" />
    <link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
    <link rel="stylesheet" href="./css/jquery.Jcrop.css" type="text/css" />
	<style type="text/css">
    #a1{
    	width:500px;
    	height:600px;
    }
    #left{
    	width:250px;
    	height:500px;
    	margin:20px 10px;
    	overflow: hidden;
    	float:left;
    }
    #right{
    	float:left;
    	width:190px;
    	height:300px;
    	margin-left: 10px;
    	margin-top: 20px;
    	overflow: hidden;
    }
    #img1{
      width: 250px;
      height: 300px;
      
    }
    </style>
	
    
</head>
<body>
	

	<div id="a1">
		<div id="left">
			<img id="img1" class="img1" src="images/02.jpg"/>

			<input type="file" id="file" name="files">
		</div>
		<div id="right">
			<div id="right_1">
			   <img id="img2" class="img2" src="images/02.jpg"/>
		    </div>
		</div>
		
	</div>

</body>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/jquery.Jcrop.js"></script>
<script type="text/javascript">
         jQuery(function($){
         	 function getObjectURL(file) {
                var ulr = null;
                if (window.createObjectURL != undefined) {
                    url = window.createObjectURL(file);
                } else if(window.URL!=undefined){
                    url = window.URL.createObjectURL(file);
                } else if (window.webkitURL != undefined) {
                    url = window.webkitURL.createObjectURL(file);
                }
                return url;
            }
            
                    var boundx,
                    boundy;
                 // Grab some information about the preview pane
                $preview = $('#rigth'),
                $pcnt = $('#right #right_1'),
                $pimg = $('#right #right_1 #img2'),

                 xsize = $pcnt.width(),
                 ysize = $pcnt.height();
                 console.log('init',[xsize,ysize]);
            
         	 $('#file').change(function () {
                var jcrop_api;
                var url = getObjectURL(this.files[0]);
                if (url) {
                                        
                       
                       $('.img1').attr("src", url);
                       $('.img2').attr("src", url);
                       
                       $('#left #img1').Jcrop({ 
      onChange: updatePreview,
      onSelect: updatePreview,
      setSelect:[20,20,100,100],
      allowResize:false,
      allowSelect:false,
      aspectRatio: xsize / ysize
    },function(){
      // Use the API to get the real image size
      var bounds = this.getBounds();
      boundx = bounds[0];
      boundy = bounds[1];
      
      // Store the API in the jcrop_api variable"
      jcrop_api = this;
      
      
      
      // Move the preview into the jcrop container for css positioning
      
    });

    function updatePreview(c)
    {
      if (parseInt(c.w) > 0)
      {
        var rx = xsize / c.w;
        var ry = ysize / c.h;

        $pimg.css({
          width: Math.round(rx * boundx) + 'px',
          height: Math.round(ry * boundy) + 'px',
          marginLeft: '-' + Math.round(rx * c.x) + 'px',
          marginTop: '-' + Math.round(ry * c.y) + 'px'
        });
      }
    };
     
                }
                
            }) 
         });
    </script>
</html>

<无标签>
举报
es星辰
发帖于4个月前 0回/12阅
顶部