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

didikee 發布于2019-08-22 17:14 / 3189人閱讀

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

Croppie.js之圖片裁剪壓縮上傳

h5圖片裁剪, 壓縮, 上傳, 預覽是常見功能, 幸運的是我們有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...

GPU云服務器云服務器 H5圖片壓縮上傳 js圖片壓縮上傳 js壓縮圖片上傳 H5移動端上傳圖片

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94981.html

用Canvas實現h5移動端圖片裁剪

摘要：前陣子七夕的時候搞了一個活動頁，需要做一個本地圖片的裁剪上傳功能，用于生成一些特定的表白圖片。還有就是是配合實現的，因為我是直接在項目中復制過來改改的，就懶得轉換了圖片讀取要裁剪首先肯定就是讀取圖片文件。前陣子七夕的時候搞了一個h5活動頁，需要做一個本地圖片的裁剪上傳功能，用于生成一些特定的表白圖片。主要是用到了H5的FileApi 和 Canvas。個人感覺圖片裁剪功能還是很實用的...

GitChat 2019-08-20 13:33 評論0 收藏0
怎么重復使用inputStream?

摘要：引語之前做項目的時候遇到一個問題就是從網絡中讀取的圖片要上傳到而且要對圖片進行裁剪和壓縮其中上傳和裁剪都要使用到圖片的又因為不能重復讀導致裁剪是成功的而上傳是失敗的我們今天就提供兩種方法來解決不能重復讀的問題問題分析的內部有個指針當讀取的時引語： ????之前做項目的時候遇到一個問題,就是從網絡中讀取的圖片要上傳到oss,而且要對圖片進行裁剪和壓縮,其中上傳和裁剪都要使用到圖片的in...

light 2019-08-16 18:26 評論0 收藏0
前端臨床手札——文件上傳

摘要：文件上傳基本是學習前端路上必定遇到的例子，然而網上能找到的都是單單滿足上傳這步的案例。但前提是需要約定傳入值和返回類型。文件上傳基本是學習前端路上必定遇到的例子，然而網上能找到的都是單單滿足上傳這步的案例。大多文章之所以只說上傳這步估計是簡單易入門，但是實際工作時就會發現上傳文件這個功能上是簡單的，邏輯上卻比較復雜。先說一下需求和功能點：需求：上傳文件到服務器功能：上傳單這么...

SexySix 2019-08-19 18:07 評論0 收藏0
image-process圖片裁剪/等比縮放，壓縮，支持本地/同域視頻文件截圖 (html5 + c

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

whlong 2019-08-23 12:18 評論0 收藏0