<!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. 【ZH奶酪】如何用textgenrnn处理中文

    如何用textgenrnn处理中文 1. 什么是textgenrnn? textgenrnn是建立在Keras和TensorFlow之上的,可用于生成字级别和词级别文本.网络体系结构使用注意力加权来加 ...

  2. 树莓派3中编译Opencv3.4.10

    一.命令 -dev libv4l-dev libavcodec-dev libavformat-dev libswscale-dev cd wget http://sourceforge.net/pr ...

  3. ionic build - 修改gradle路径提升速度和成功率

    ionic build 不成功很多时候是因为下载gradle太慢, 我们可以下载好gradle然后修改配置文件, 从而省去这个烦人的下载过程 1. 下载报错时的gradle zip文件, 或者直接查看 ...

  4. 【转】Vmware14安装Centos7无法上网问题的解决

    原文链接 1. 选择Net模式 修改配置子网ip. 修改子网的IP不要和本机的IP地址在同一个网段 比如本机IP地址信息: 无线局域网适配器 WLAN: 连接特定的 DNS 后缀 . . . . . ...

  5. 【Zookeeper】源码分析之网络通信（三）之NettyServerCnxn

    一.前言 前面已经学习了NIOServerCnxn,接着继续学习NettyServerCnxn. 二.NettyServerCnxn源码分析 2.1 类的继承关系 public class Netty ...

  6. pycharm修改快捷键

    1.keymap 2.找到需要修改的功能 3.鼠标右键选择——选择“add keyboard shortcut” 4.直接按需要设置的快捷键位,如F6 5.确定

  7. 关于ř与tableau的集成---- k均值聚类

    1.利用R内置数据集iris: 2.通过Rserve 包连接tableau,服务器:localhost,默认端口6311: 3.加载数据集iris: 4.编辑字段:Cluster <span s ...

  8. primary库新增数据文件后，standby库无法创建文件并终止数据同步

    主库是RAC环境,使用asm存放数据文件,备库是操作系统本地文件系统存放数据文件.在主库执行以下操作: SQL> alter tablespace ysdv add datafile '+dat ...

  9. system函数遇到的问题

     这几天调程序(嵌入式linux),发现程序有时就莫名其妙的死掉,每次都定位在程序中不同的system()函数,直接在shell下输入system()函数中调用的命令也都一切正常.就没理这个bug,以 ...

  10. https://stackoverflow.com/questions/51751426/failed-to-run-the-da-platform-trial-vm

    https://stackoverflow.com/questions/51751426/failed-to-run-the-da-platform-trial-vm {  "annotat ...