国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

H5圖片裁剪-壓縮-上傳-神奇的Croppie.js

didikee / 3194人閱讀

摘要：之圖片裁剪壓縮上傳圖片裁剪壓縮上傳預(yù)覽是常見功能幸運(yùn)的是我們有這款利器上傳選擇圖片文件裁剪挺好用的圖片處理插件另外還有較好的插件有待研究

Croppie.js之圖片裁剪壓縮上傳 
h5圖片裁剪, 壓縮, 上傳, 預(yù)覽是常見功能, 幸運(yùn)的是我們有cropp.js這款利器.
1. style
2.html
3.JavaScript 
  
  


$(function(){ 
 var $uploadCrop; 
  
  function readFile(input) { 
    if (input.files && input.files[0]) { 
    var reader = new FileReader(); 
      
    reader.onload = function (e) { 
     $uploadCrop.croppie("bind", { 
      url: e.target.result 
     }); 
    } 
      
    reader.readAsDataURL(input.files[0]); 
   } 
   else { 
    alert("Sorry - you"re browser doesn"t support the FileReader API"); 
   } 
  } 
  
  $uploadCrop = $("#upload-demo").croppie({ 
   viewport: { 
    width: 200, 
    height: 200, 
    type: "circle"
   }, 
   boundary: { 
    width: 300, 
    height: 300 
   },
   showZoomer: false,
  }); 
  
  $("#upload").on("change", function () { 
   $(".crop").show(); 
   readFile(this); 
  }); 
  $(".upload-result").on("click", function (ev) { 
   $uploadCrop.croppie("result", "canvas").then(function (resp) { 
    popupResult({ 
     src: resp 
    }); 
   }); 
  }); 
    
 function popupResult(result) { 
  var html; 
  if (result.html) { 
   html = result.html; 
  } 
  if (result.src) { 
   html = ""; 
  } 
  $("#result").html(html); 
 } 
}); 
croppie.js挺好用的圖片處理插件, 另外還有較好的插件有待研究
http://foliotek.github.io/Cro...  
https://github.com/tapmodo/Jcrop
https://fengyuanchen.github.i...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/94981.html

相關(guān)文章

  • 用Canvas實(shí)現(xiàn)h5移動(dòng)端圖片裁剪

    摘要：前陣子七夕的時(shí)候搞了一個(gè)活動(dòng)頁，需要做一個(gè)本地圖片的裁剪上傳功能，用于生成一些特定的表白圖片。還有就是是配合實(shí)現(xiàn)的，因?yàn)槲沂侵苯釉陧?xiàng)目中復(fù)制過來改改的，就懶得轉(zhuǎn)換了圖片讀取要裁剪首先肯定就是讀取圖片文件。 前陣子七夕的時(shí)候搞了一個(gè)h5活動(dòng)頁，需要做一個(gè)本地圖片的裁剪上傳功能，用于生成一些特定的表白圖片。主要是用到了H5的FileApi 和 Canvas。個(gè)人感覺圖片裁剪功能還是很實(shí)用的...

    GitChat 評(píng)論0 收藏0

  • 怎么重復(fù)使用inputStream?

    摘要：引語之前做項(xiàng)目的時(shí)候遇到一個(gè)問題就是從網(wǎng)絡(luò)中讀取的圖片要上傳到而且要對(duì)圖片進(jìn)行裁剪和壓縮其中上傳和裁剪都要使用到圖片的又因?yàn)椴荒苤貜?fù)讀導(dǎo)致裁剪是成功的而上傳是失敗的我們今天就提供兩種方法來解決不能重復(fù)讀的問題問題分析的內(nèi)部有個(gè)指針當(dāng)讀取的時(shí) 引語： ????之前做項(xiàng)目的時(shí)候遇到一個(gè)問題,就是從網(wǎng)絡(luò)中讀取的圖片要上傳到oss,而且要對(duì)圖片進(jìn)行裁剪和壓縮,其中上傳和裁剪都要使用到圖片的in...

    light 評(píng)論0 收藏0

  • 前端臨床手札——文件上傳

    摘要：文件上傳基本是學(xué)習(xí)前端路上必定遇到的例子，然而網(wǎng)上能找到的都是單單滿足上傳這步的案例。但前提是需要約定傳入值和返回類型。 文件上傳基本是學(xué)習(xí)前端路上必定遇到的例子，然而網(wǎng)上能找到的都是單單滿足上傳這步的案例。大多文章之所以只說上傳這步估計(jì)是簡(jiǎn)單易入門，但是實(shí)際工作時(shí)就會(huì)發(fā)現(xiàn)上傳文件這個(gè)功能上是簡(jiǎn)單的，邏輯上卻比較復(fù)雜。 先說一下需求和功能點(diǎn)： 需求：上傳文件到服務(wù)器 功能：上傳 單這么...

    SexySix 評(píng)論0 收藏0

  • image-process圖片裁剪/等比縮放，壓縮，支持本地/同域視頻文件截圖 (html5 + c

    摘要：解決圖片上傳前裁剪等比縮放，壓縮，支持本地視頻同域視頻文件截圖功能等。選擇圖片按鈕，支持選擇器，或者對(duì)象僅實(shí)例化時(shí)有效裁剪或縮放寬度為可選限制寬度縮放，則只需設(shè)置值。限制高度縮放，則只需設(shè)置值。 image-process-tools Image pre processing for upload (html5 + canvas), ie10+ 解決圖片上傳前裁剪、等比縮放，壓縮，支持...

    whlong 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<