<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    .img {

      width: 600px;

      height: 400px;

      box-sizing: border-box;

      border: 10px solid #f48;

    }

  </style>

</head>

<body>

  <img class="img" src="./b.jpg" alt="">

  <hr>

  <canvas style="background-color: #000;"></canvas>

  <script src="https://cdn.bootcss.com/smartcrop/2.0.3/smartcrop.js"></script>

  <script>

    let l = console.log;

    let image = document.querySelector('.img')

    var c = document.querySelector('canvas')

    var ctx = c.getContext('2d');

    image['onload'] = function () {

      smartcrop.crop(image, {

        minScale: 1.0,

        width: 100,

        height: 100,

        debug: true

      }).then(function (res) {

        l(res);

        l(res.topCrop);

        c.width = res.topCrop.width;

        c.height = res.topCrop.height;

        ctx.drawImage(image, res.topCrop.x, res.topCrop.y, c.width, c.height, 0, 0, c.width, c.height);

      });

    }

  </script>

</body>

</html>

smartcrop.js 内容感知图像裁剪的更多相关文章

  1. smartcrop.js智能图片裁剪库

    今天将为大家介绍一款近期github上很不错的开源库 – smartcrop.js.它是一款图片处理的智能裁剪库.在很多项目开发中,经常会遇见上传图片的场景,它可能是用户照片信息,也可能是商品图片等. ...

  2. 使用js加载图像和setDataXML()加载数据

    使用js加载图像和setDataXML()加载数据 前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<E ...

  3. 【开源】canvas图像裁剪、压缩、旋转

    前言 前段时间遇到了一个移动端对图像进行裁剪.压缩.旋转的需求. 考虑到已有各轮子的契合度都不高,于是自己重新造了一个轮子. 关于图像裁剪.压缩 在HTML5时代,canvas的功能已经非常强大了,可 ...

  4. canvas图像裁剪、压缩、旋转

    转载于:http://www.cnblogs.com/dailc/p/7843204.html 前言 前段时间遇到了一个移动端对图像进行裁剪.压缩.旋转的需求.考虑到已有各轮子的契合度都不高,于是自己 ...

  5. jQuery Jcrop 图像裁剪

    jQuery Jcrop 图像裁剪 http://code.ciaoca.com/jquery/jcrop/ cropper.js 实现HTML5 裁剪图片并上传(裁剪上传头像.) https://b ...

  6. 基于layui+cropper.js实现上传图片的裁剪功能

    最近因项目需求,需要在上传图片的时候先对图片裁剪,然后在上传,所以就有了本文的出现. 开始正文之前,要提一下这个图片的裁剪:图片的裁剪,有前端裁剪,也可以后端裁剪 前端的裁剪我知道的可以分为这么两种: ...

  7. 结构感知图像修复：ICCV2019论文解析

    结构感知图像修复:ICCV2019论文解析 StructureFlow: Image Inpainting via Structure-aware Appearance Flow 论文链接: http ...

  8. PHP图像裁剪为任意大小的图像，图像不变形，不留下空白

    <?php /** * 说明:函数功能是把一个图像裁剪为任意大小的图像,图像不变形 * 参数说明:输入 需要处理图片的 文件名,生成新图片的保存文件名,生成新图片的宽,生成新图片的高 */ fu ...

  9. HTML canvas图像裁剪

    canvas drawImage方法的图像裁剪理解可能会比较耗时,记录一下,以便供人翻阅! context.drawImage(img,sx,sy,swidth,sheight,x,y,width,h ...

随机推荐

  1. pycharm调整代码长度分割线

    1.File ->  Settings  ->  Code Style -> Right margin (columns) 的值为80,大功告成. 2.具体设置的数值可以根据个人电脑 ...

  2. zip压缩解压

    zip在linux中使用相对不太频繁,但是在window中使用频繁! zip参数 -q //不显示指令的执行过程,静默执行-r //递归处理文件-T //检测zip文件是否可用-u //更新文件,根据 ...

  3. Mocks Aren't Stubs

    Mocks Aren't Stubs The term 'Mock Objects' has become a popular one to describe special case objects ...

  4. 苹果产品时间发布表统计（iPhone、iPad），以及32位和64位机的说明

    之前因为某些原因,需要对apple家族的手机和pad产品做一个上市时间排序,以及分析分别是哪种CPU机型 总结如下: iPad家族: 1.iPad   - 2010.1.27发布 2.iPad 2   ...

  5. cas 资源

    http://blog.sina.com.cn/s/blog_6fda308501012tk2.html http://www.blogjava.net/xmatthew/archive/2008/0 ...

  6. 基于Centos搭建 Mono 开发环境

    系统要求: CentOS 7.2 64 位操作系统 安装 Mono 安装前的准备 yum install yum-utils 执行命令添加安装包仓库 rpm --import "http:/ ...

  7. C#:注册组件 （cmd）

    public class ComRegistor { public static string classID = "CLSID\\{479A1AAC-C148-40BB-9868-A977 ...

  8. cocos2d-x中的坑

    1. 设置opacity=0, 子结点不受到影响. FadeOut 也不起作用. 查看代码可以找到一个 cascadeOpacityEnabled 的参数, 默认是关闭的. 打开就可以了. 2. Ta ...

  9. Cortex-A15架构解析：它为什么这么强(转)

    今年的新手机趋势无异是全面向四核靠拢,不过同样是四核,在实际的性能上其实是千差万别.例如针对入门级主流市场的四核手机普遍采用的都是Cortex-A7以及 Cortex-A9 级别的CPU内核,这类内核 ...

  10. 【30集iCore3_ADP出厂源代码(ARM部分)讲解视频】30-5 底层驱动之旋转编码器

    源视频包下载地址:链接:http://pan.baidu.com/s/1mhENI9i密码:mf1x 银杏科技优酷视频发布区:http://i.youku.com/gingko8