图片裁剪功用进修小结

图片裁剪功用进修小结

近期有须要运用图片裁剪的功用,在运用插件和本身写裁剪组件之间犹疑了良久,厥后依据需求经由重复的斟酌,照样本身封装吧,毕竟本身着手,饱食暖衣,对吧?嗯,💪🏻💪🏻💪🏻是的!末了天生裁剪后的图片运用了 html2canvas插件,完成了图片的裁剪功用。然则,发明需求当中竟然有裁剪GIF的需求,但是我的裁剪组件并不能满足这个需求,还存在图片清晰度的题目。为了完成这个需求,在后端运用 node 插件举行截图,然则并没有找个一个满足需求的插件,末了决议运用七牛云的图片高等处置惩罚效劳。在完成该功用的过程当中,对一些插件举行了总结,轻易影象,有什么不正确的处所,愿望人人多多指教!

一、插件展现

《图片裁剪功用进修小结》

二、前端裁剪插件

1. html2canvas

html2canvas 能够直接在浏览器端将全部页面或许部份页面天生截图,将DOM构造渲染成canvas画布。

  • 运用要领:http://html2canvas.hertzen.co…
  • 部份代码:

    《图片裁剪功用进修小结》

  • 碰到的题目:

    《图片裁剪功用进修小结》

  • 缘由:图片跨域题目,只管不通过 CORS 就能够在画布中运用图片,然则这会污染画布。一旦画布被污染,你就没法读取其数据。比方,你不能再运用画布的 toBlob(), toDataURL() 或 getImageData() 要领,挪用它们会抛出平安毛病。
  • 解决办法:

    html2canvas的设置项中设置 allowTaint:true 或 useCORS:true(两者不可配合运用);
    运用反向代办或许效劳器增加相应头 header("Access-Control-Allow-Origin: *")
    
2. jQuery Jcrop 图象裁剪

Jcrop 是一个功用强大的 jQuery 图象裁剪插件,连系后端顺序能够疾速的完成图片裁剪的功用。(没有运用过…)

3. vue-cropper 基于vue的裁剪组件

三、node 裁剪插件

1. gm

第一次首先要装置 GraphicsMagick或许ImageMagick,Mac OS X能够运用brew装置。

  • 运用要领:
       装置:
        brew install imagemagick
        brew install graphicsmagick
        npm install --save gm
       引入:
       var fs = require('fs')
       var gm = require('gm').subClass({imageMagick: true})
  • 部份代码
      gm(`./upload/${req.body.name}`)
      .resize('300', '468', '^')
      .gravity('Center')
      .crop('200', '400')
      .write(`./upload/${cropName}`, function (e) {// 输出的图片途径
        if(e) {
            console.log(e.message)
        }else {
            res.send({
                stat: 1,
                data: {
                   mesg: 'OK',
                   url: `http://${req.headers.host}/upload/${cropName}`
                }
            })
            console.log('done')
        }
  • 优缺点
    能够裁剪GIF图,然则运用rise函数缩放以后,GIF图会失真。裁剪的图片和原图的大小一样,选中的地区被裁剪,然则其他处所是通明的。
  • 效果图
    左图为缩放以后裁剪的图片,右图为原图
    《图片裁剪功用进修小结》
3. sharp
  • 运用要领
     装置
     npm install --save sharp
     引入:
     var sharp = require('sharp')
  • 部份代码
     sharp('图片途径')
    .extract(top, left, width, height)
    .resize(150, 150)
    .sharpen()
    .quality(100)
    .toFile('裁剪以后保留的途径', function (err) {
      if (err) throw err;
      console.log('done!')        
       res.send({
            stat: 1,
            data: {
               mesg: 'OK',
               url: `http://${req.headers.host}/upload/${cropName}`
            }
        })
    });
  • 优缺点
    sharp只能够裁剪GIF的第一帧,然则运用比较轻易

参考文献
http://shieldax.github.io/201… sharp裁剪

    原文作者:Aima
    原文地址: https://segmentfault.com/a/1190000017813117
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞