<!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. gitolite migration to bitbucket

    https://gist.github.com/kostajh/9249937 https://designhammer.com/blog/easily-migrate-git-repositorie ...

  2. Always run a program in administrator mode in Windows 10

    From: https://www.cnet.com/how-to/always-run-a-program-in-administrator-mode-in-windows-10/ If you'r ...

  3. PC高级语言与施耐德、罗克韦尔、台达等PLC的Modbus通讯源代码（ModbusTCP.DLL/ModbusRTU.DLL）

    1.0  通讯组件概述 该类通讯组件适用于基于PC高级语言的工业自动化控制系统,用于PC与可编程控制器(PLC).智能仪表等进行数据通讯.组件采用动态链接库文件(*.DLL)的形式,在PC系统的项目工 ...

  4. Android中asset文件夹和raw文件夹区别与用法

    *res/raw和assets的相同点: 1.两者目录下的文件在打包后会原封不动的保存在apk包中,不会被编译成二进制. *res/raw和assets的不同点:1.res/raw中的文件会被映射到R ...

  5. Django中使用Celery，定制应用程序中定义的shared_task未在定期任务管理页面的注册任务中显示

    解决办法: 在项目 proj/proj/celery.py文件中,看到下面这行配置: celery_app.config_from_object('django.conf:settings', nam ...

  6. HTML中input type="text"和type="password" 显示的长度不一样

    在CSS里边加上input {width:100px;}能把所有input标签的控件宽度改为相同! 加上这个属性 style="width:180px;"

  7. CMD递归文件夹

    SET dir=%~dp0 SET /a cnt=0 echo dir is: %dir% cd /d %dir% for /R %dir% %%i in (*.apk) do ( set /a cn ...

  8. android studio: 一个Android studio 3.3.2 无法创建新项目的问题

    记录一个AS无法创建新项目的问题. 今天想写一个测试Demo,点击上面的“Start a new Android Studio Project” ,填写完包名和项目路径后,点“Finish”, AS无 ...

  9. 详解CUDA编程

    CUDA 是 NVIDIA 的 GPGPU 模型,它使用 C 语言为基础,可以直接以大多数人熟悉的 C 语言,写出在显示芯片上执行的程序,而不需要去学习特定的显示芯片的指令或是特殊的结构.” 编者注: ...

  10. Push to origin/master was rejected （Git提交错误）(转)

    [问题描述] 在使用Git Push代码的时候,会出现 Push to origin/master was rejected 的错误提示. 在第一次提交到代码仓库的时候非常容易出现,因为初始化的仓库和 ...