第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定

圖片的等比例縮放

標(biāo)簽:
Html/CSS JavaScript
<div class="info-item business-license">
    <label class="info-label">营业执照</label>
    <div class="info-input-wrap">
        <div class="license-wrap">
            <img class="license-img" id="licenseImg" onload="javascript:DrawImage(this,167,198)" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="${staticURL }/image/default-license.png" />
        </div>
        <div class="license-btn">
            <span class="license-text">上传营业执照</span>
            <input type="file" class="upload-btn" id="uloadBtn1" name="licenseImgFile" accept=".png,.jpg,.jpeg" />
        </div>
        <div class="license-remove" id="removeLicense">×</div>
    </div>
</div>

上传图片后img标签展示出来,并等比例缩放,设置最大宽高为167,198;

     编写input上传事件,并显示预览图片。

$('#uloadBtn1').on('change', function () {
    var files = this.files[0];
    var objUrl = showPhoto(this.files[0]);
    if (objUrl) {
        $("#licenseImg").attr("src", objUrl);
        $('.info-input-wrap').addClass('bicense-wrap')
        $(this).parents('.license-btn').addClass('license-change');
    }
    var formData = new FormData();
    formData.append('file', $('#uloadBtn1')[0].files[0]); //添加图片信息的参数
})

编写图片预览方法

//头像预览
function showPhoto (file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic  
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)  
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome  
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
}

以上实现了选择图片,再页面上预览。再图片加载时,根据图片大小来实现缩放,设置图片显示的大小。使用加载方法。

function DrawImage(ImgObj, maxWidth, maxHeight){
    //原图片原始地址(用于获取原图片的真实宽高,当<img>标签指定了宽、高时不受影响)
    image.src = ImgObj.src;// 用于设定图片的宽度和高度
    var tempWidth;	
    var tempHeight;
    if(image.width > 0 && image.height > 0){
      if((image.width/image.height) >= maxWidth / maxHeight){
        if(image.width > maxWidth){
            empWidth = maxWidth;
            tempHeight = (image.height * maxWidth) / image.width;
        }else{
            tempWidth = image.width;
            tempHeight = image.height;
        }
      }else{
        if(image.height>maxHeight){
         tempHeight = maxHeight;	// 按原图片的比例进行缩放
         tempWidth = (image.width * maxHeight) / image.height;
        }else{
          tempWidth = image.width;
          tempHeight = image.height;
        }
      }	
      // 设置页面图片的宽和高
      ImgObj.height = tempHeight;
      ImgObj.width = tempWidth;       
    }
}

因图片加载时调用该方法,DrawImage需要再放在最前。

點(diǎn)擊查看更多內(nèi)容
TA 點(diǎn)贊

若覺得本文不錯(cuò),就分享一下吧!

評論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學(xué)習(xí),寫下你的評論
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊有機(jī)會得

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

舉報(bào)

0/150
提交
取消