<!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. boost.property_tree解析xml的帮助类以及中文解析问题的解决(转)

    boost.property_tree可以用来解析xml和json文件,我主要用它来解析xml文件,它内部封装了号称最快的xml解析器rapid_xml,其解析效率还是很好的.但是在使用过程中却发现各 ...

  2. centos7 使用rsync 实现文件同步

    一.服务端(192.168.8.81): 安装软件: yum -y install rsync 创建需同步的目录: mkdir -p /home/root/rsync 编辑配置文件:vim /etc/ ...

  3. 马斯克：有62%的程序员认为人工智能会被武器化 #精选AR人工智能算法

    当地时间 9 月 13 日,马斯克在自己的个人推特账号上转推了一篇名为<Hackers Have Already Started to Weaponize Artificial Intellig ...

  4. DockOne技术分享（二十）：Docker三剑客之Swarm介绍

    [编者的话]Swarm项目是Docker公司发布三剑客中的一员,用来提供容器集群服务,目的是更好的帮助用户管理多个Docker Engine,方便用户使用,像使用Docker Engine一样使用容器 ...

  5. JVM内存区域的划分（内存结构或者内存模型）

    JVM内存区域的划分(内存结构或者内存模型)   运行时数据区域: 根据 JVM 规范,JVM 内存共分为虚拟机栈.堆.方法区.程序计数器.本地方法栈五个部分. 程序计数器(线程私有): 是当前线程所 ...

  6. WPF手动绑定事件

    this.but1.AddHandler(Button.ClickEvent,new RoutedEventHandler(OkButton_Click));

  7. NuGet Package Explorer

    https://www.microsoft.com/zh-cn/store/p/nuget-package-explorer/9wzdncrdmdm3?ocid=badge&rtc=1

  8. 单片机成长之路（51基础篇） - 017 C51中data,idata,xdata,pdata的区别(转)

    从数据存储类型来说,8051系列有片内.片外程序存储器,片内.片外数据存储器,片内程序存储器还分直接寻址区和间接寻址类型,分别对应code.data.xdata.idata以及根据51系列特点而设定的 ...

  9. 【java】解析java网络

    目录结构: contents structure [+] 模拟Post与Get请求 设置Authorization头信息 基于TCP的网络编程 TCP协议简介 半关闭的Socket TCP长链接 TC ...

  10. Hardware Monitor for Mac（硬件运行状态监测工具）破解版安装

    1.软件简介    Hardware Monitor 是 macOS 系统上一款 mac 硬件检测软件,同时还可以示硬盘.显卡温度以及电池电压等等监控信息.Hardware Monitor for M ...