javascript - Cropper canwas 最小尺寸
问题描述
我在模态中有裁剪器。但我不明白如何设置最小尺寸并将裁剪器设置为圆形?
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="img-container">
<div class="row">
<div class="col-md-5">
<img id="image" src="https://avatars0.githubusercontent.c/u/3456749">
</div>
</div>
</div>
</div>
和脚本:
$modal.on('shown.bs.modal', function () {
cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 4,
preview: '.preview',
});
let height = 300;
let width = 300;
var context = canvas.getContext('2d');
context.imageSmoothingEnabled = true;
context.drawImage(sourceCanvas, 0, 0, width, height,0,0,320,320);
context.globalCompositeOperation = 'destination-in';
context.beginPath();
context.ellipse(width / 2, height / 2, width / 2, height / 2, 45 * 3.14, 0, 45 * 3.14);
context.fill();
解决方案
推荐阅读
- html - 将用户输入中的文本添加到超链接
- android - Room - 将列表中的编辑保存到数据库设计问题
- swift - Swift 字符串包含 , 或 . 但不是两者
- php - pwa service worker 不导入脚本
- javascript - 在 React + NodeJS 上通过浏览器的 WebSockets
- github - 在github中,是否可以在分支和标签之间进行比较?
- json - Folium - 具有嵌套 JSON 的样式函数
- javascript - 带有身份验证的 XMLHTTP 请求
- java - 如何使用字符串中的元字符删除所有非字母字符,不包括空格?
- laravel - 在 laravel 集合中添加新元素以在 laravel 中建立友谊