H5图片裁剪-压缩-上传-神奇的Croppie.js

didikee 发布于2019-08-22 17:14 / 3036人阅读

摘要：之图片裁剪压缩上传图片裁剪压缩上传预览是常见功能幸运的是我们有这款利器上传选择图片文件裁剪挺好用的图片处理插件另外还有较好的插件有待研究

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...

私有云 idc机房托管 H5图片压缩上传 js图片压缩上传 js压缩图片上传 H5移动端上传图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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
怎么重复使用inputStream?

摘要：引语之前做项目的时候遇到一个问题就是从网络中读取的图片要上传到而且要对图片进行裁剪和压缩其中上传和裁剪都要使用到图片的又因为不能重复读导致裁剪是成功的而上传是失败的我们今天就提供两种方法来解决不能重复读的问题问题分析的内部有个指针当读取的时引语：之前做项目的时候遇到一个问题,就是从网络中读取的图片要上传到oss,而且要对图片进行裁剪和压缩,其中上传和裁剪都要使用到图片的in...

cc17 2019-08-08 14:18 评论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