<!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. C#SpinWait和volatile一点温习

    今天看ConcurrentQueue<T> 源码发现里面居然没有用到lock,我记得ConcurrentDictionary里面是有lock的,lock的是字典里面每一个key,但是Con ...

  2. How to make PostgreSQL functions atomic?

    Question: How to make PostgreSQL functions atomic? Assume I have some PostgreSQL functions like the ...

  3. [Python设计模式] 第6章 衣服搭配系统——装饰模式

    github地址:https://github.com/cheesezh/python_design_patterns 题目 设计一个控制台程序,可以给人搭配嘻哈风格(T恤,垮裤,运动鞋)或白领风格( ...

  4. Spark GraphX实例(2)

    5. 图的转换操作 图的转换操作主要有以下的方法: (1) Graph.mapVertices():对图的顶点进行转换,返回一张新图: (2) Graph.mapEdges():对图的边进行转换,返回 ...

  5. SoapUI Pro Project Solution Collection-access the soapui object

    Technorati 标签: Soapui pro,web service,apI Testing

  6. spring-boot 1.X集成swagger

    1.引入POM依赖 <properties> <swagger-annotations.version>1.5.13</swagger-annotations.versi ...

  7. 【阿里巴巴Java开发手册——集合处理】13.集合的稳定性（order）和有序性（sort）

    有序性(sort):指遍历的结果是按照某种比较规则依次排列的. 稳定性(order):指集合每次遍历的元素的次序是一定的. 如:ArrayList是order/unsort HashMap是unord ...

  8. 用 JAAS 和 JSSE 实现 Java 安全性

    JAAS 和 JSSE 概述 JAAS 提供了一种灵活的.说明性的机制,用于对用户进行认证并验证他们访问安全资源的能力.JSSE 定义了通过安全套接字层(SSL)进行安全 Web 通信的一种全 Jav ...

  9. [CTCI] 最小调整有序

    最小调整有序 题目描述 有一个整数数组,请编写一个函数,找出索引m和n,只要将m和n之间的元素排好序,整个数组就是有序的.注意:n-m应该越小越好,也就是说,找出符合条件的最短序列. 给定一个int数 ...

  10. vue项目使用webpack loader把px转换为rem

    下载lib-flexible https://github.com/amfe/lib-flexible npm i lib-flexible --save 在main.js中引入lib-flexibl ...