apicloud apicloud

注册
查看: 1105|回复: 3

[APP开发技巧] JS生成缩略图 裁剪图片 缩略图

马路杀手

UID:89448

主题:
56
帖子:
174
云币:
188

APICloud粉丝装逼侠

[APP开发技巧] JS生成缩略图 裁剪图片 缩略图

1105 3 | 发表于 2017-8-27 22:24:05 |阅读模式 | |
本帖最后由 3976123 于 2017-8-28 13:22 编辑

最近在使用 apicloud 完成一个项目  ,在上传产品的时候碰到一个问题,就是上传之前先要给客户一个 缩略图 预览而且这个缩略图还需要等比例缩放成 正方形   

可惜找遍了模块 看遍了文档论坛 也没找到合适的 裁剪缩略图方案  经过一天折腾 弄了出来 分享出来


    将图片等比例生成 正方形缩略图   返回 base64 格式图片
    function makeThumb(path,size,callback){  @参1  图片地址 可以是远程 可以是本地路径  @参2 生成缩略图大小 像素 @参3 回调
      var img = new Image();
      img.src  = path;

      img.onload = function(){
        var imgH = img.height;
        var imgW = img.width;
        if(imgW >imgH){
           var percent =   size / imgH;
           imgH = size;
           imgW = parseInt(imgW*percent);
        }else{
          var percent =   size / imgW;
          imgW = size;
          imgH = parseInt(imgH*percent);
        }
        var canvas = document.createElement("canvas");
        var context=canvas.getContext("2d");
        canvas.width = imgW;
        canvas.height = imgH;
        context.drawImage(img,0,0,imgW,imgH);
        var _canvas = canvas.toDataURL();
        img.src = _canvas;
        canvas.width = size;
        canvas.height = size;
         if(imgW >imgH){
           var x = parseInt(imgW-size)/2;
           var y = 0;
         }else{
           var x= 0;
           var y = parseInt(imgH-size)/2;
         }
         context.drawImage(img,x,y,size,size,0,0,size,size);
        _canvas = canvas.toDataURL();
        return callback(_canvas);
      };
    }


   使用方法   
   makeThumb('图片路径',200,function(path){

   })经过测试 放到apiready 里执行 存在跨域问题不能用 必须在apiready 之外使用


1

查看全部评分

主题:
2
帖子:
17
云币:
165
发表于 2018-12-18 02:12:47 |
怎么一直在无限循环中??

主题:
60
帖子:
107
云币:
138
发表于 2017-9-1 09:36:25 |
谢谢分享,同时也解决了我的难题,衷心感谢,以后要多多分享

老司机

UID:673413

主题:
175
帖子:
12674
云币:
5646

圣诞节

发表于 2018-12-18 10:22:53 |
感谢分享
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表