1回答
我正在制作一个离子应用程序，需要我以16:9的纵横比裁剪图像。到目前为止，我找不到任何插件。
我正在使用离子相机插件，代码如下
var opt : CameraOptions = {
quality: 20,
targetWidth: 1920,
targetHeight: 1080,
allowEdit: true,
destinationType: this.camera.DestinationType.DATA_URL,
sourceType: this.camera.PictureSour
浏览 13提问于2018-02-10得票数 1
在尝试将cropper.js导入到我的ASP.Net项目中时，我复制并粘贴了为实现它而提供的示例代码。但是，每当加载页面时，我都会收到一系列来自主cropper.js文件的404错误，说明没有找到其他javascript文件。我已经确保它们位于Scripts/cropperjs/src/js中，这是404错误的来源。我需要做什么才能让这些文件被识别？ 下面是我在页面上的确切代码： <script type="module">
import 'cropperjs/dist/cropper.css';
import Cropper fr
浏览 14提问于2021-08-12得票数 0
我想使用cropper.js ()创建一个带有Angular2 -cli的裁剪器。
我的指令是：
import {Directive, ElementRef, Input, OnInit} from '@angular/core';
import Cropper from 'cropperjs';
@Directive({
selector: '[ng2-cropper]'
})
export class Ng2CropperJsDirective implements OnInit {
@Input('options'
浏览 10提问于2017-01-25得票数 7
回答已采纳
1回答
我创建了一个自定义控件，我以编程方式提供该值，因为它是基于cropper.js的图像编辑器，用户通过正常的文件输入“上传”图像，然后使用File将图像分配给我的自定义控件。
下面是代码(为了提高可读性，我删除了一些cropper.js特定的代码)
import {
Component,
OnInit,
ViewChild,
ElementRef,
ViewEncapsulation,
forwardRef
} from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAcce
浏览 3提问于2017-04-05得票数 7
回答已采纳
1回答
我正在使用cropper.js。我想上传原始图像和裁剪的坐标(x，y，宽度，高度)而不是裁剪的图像。做这件事的首选方法是什么？
谢谢。
浏览 13提问于2017-01-31得票数 2
回答已采纳
我在使用Cropper.JS上传和裁剪图像时遇到了问题。假设我上传70KB的文件后，使用裁剪工具，它的大小得到增加，是115KB，有时它也转换为MB的一些其他文件大小。
浏览 0提问于2017-09-06得票数 2
1回答
我试图在语义模式中添加cropper.js。我正在做下面的步骤。
1)页面上有一个名为SelectImage的按钮
2)如果我点击“选择图像”，一个模式是打开的，名字是拇指。拇指模式有2个按钮从本地pc和选择媒体。
3)如果单击“从本地pc文件中选择”对话框打开，图像选择器正在工作，并将cropper.js分配给选定的图像完美。
4)如果我点击“选择媒体”按钮，它们会打开媒体模式，而我在那里有很多图像，而我在每幅图像上有一个按钮，如果我点击图像路径，就会传递到以前的模式，称为“拇指”，并且指定了裁剪工具，但是尺寸比给定的尺寸要小，如果我打开的话，就可以检查镀铬折叠器大小的。
您将更好地使用以下
浏览 2提问于2016-09-29得票数 2
回答已采纳
1回答
我正在尝试使用Cropper.js来允许用户裁剪大图像--图像通常大于3000x3000像素。
当图像加载到我的div元素中时，它会缩小到1024px宽。在我的测试用例中，原始图像是4032x2268，所以在浏览器中是1024x576。
getCropBoxData()和getCanvasData()方法返回要裁剪的选定区域的x、y、宽度和高度值，但它们相对于图像的1024x576缩放比例表示该区域，而不是表示原始大小的实际图像的缩放比例。
我尝试编写一个转换例程来确定X和Y刻度值并进行相应的转换，但它不能正常工作。
在这一点上，我想我应该在这里发帖，看看有没有更简单的方法。Cropper.j
浏览 8提问于2017-05-18得票数 3
我正在使用cropper.js，当我试图初始化时，我得到了错误的Uncaught TypeError: image.cropper is not a function at FileReader.oFReader.onload。我已经从我做的最后一个项目中复制了代码，在那个项目中它可以正常工作。 我已经尝试了cropper和cropper.js，但都不起作用。我把裁剪器导入到html，就像这样，文档的头部。 <script src="node_modules/jquery/dist/jquery.js"></script>
<script src
浏览 140提问于2019-05-08得票数 1
2回答
我使用的是风元辰的cropper.js (1.5.9)。我有5472px 3648px (350dpi)的高分辨率图像。我会将这张图片裁剪到577px 377px的分辨率。当我裁剪图像时，目标图像的质量很差。
原件：
裁剪：
现在我们在裁剪后的图像上看到奇怪的圆圈，图像质量很差。我使用以下代码：
$('#crop').click(function(){
canvas = cropper.getCroppedCanvas({
width: 577,
height: 377,
浏览 41提问于2021-02-08得票数 1
1回答
我正在使用cropper.js库来裁剪图像。根据裁剪的图像，通过传递高度和宽度创建缩略图，如下所示，
cropper.getCroppedCanvas({ width: 100, height: 100 })
但是输出缩略图被扭曲了。缩略图的内存大小不应超过5kb。例如:堆栈溢出用户图标，facebook聊天窗口用户图标。
浏览 2提问于2017-03-16得票数 1
我有以下代码来更改文件选择上的图像，以便与cropper.js一起使用。这是我第一次选择文件的时候，但是当我尝试更改文件时，img不会更新。每次我换文件的时候不应该换火吗？
document.getElementById("avatar").onchange = function () {
var reader = new FileReader();
reader.onload = function (e) {
// get loaded data and render thumb
浏览 0提问于2015-10-03得票数 0
为什么我得不到特定高度和宽度的图像？ 假设我将裁剪图像设置为width=308 & height=200，它返回308X308。如果我设置width=200 & height=308，它将返回308x308。它从高度和宽度返回最大尺寸。如何解决此问题？ 我正在使用cropper.js if (cropper) {
canvas = cropper.getCroppedCanvas({
width: 308, // here set width
height: 200, // here set height
imag
浏览 20提问于2019-03-24得票数 0
1回答
通过距离滑翔机旋转图像
、、、、
嗨，伙计们，如何使图像通过距离滑块旋转？
我构建了这个函数，所以它可以在0到360之间，显示值范围，它工作得很好，但是如何应用这个来旋转图像呢？裁剪图像脚本文档是
我用裁剪脚本更新了代码，请帮助旋转图像并输出到div。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<
浏览 1提问于2019-07-11得票数 0
3回答
我正在使用，需要固定的裁剪大小。试着这样做：
<Cropper
ref='cropper'
src='babyanimal_open.jpg'
style={{height: 400, width: '100%'}}
// Cropper.js options
ready={this._ready.bind(this)}
cropBoxResizable={false}
c
浏览 2提问于2017-04-23得票数 0
我在这个link上尝试了这个教程 我的代码是 <!DOCTYPE html>
<html>
<head>
<link href="cropper.css" rel="stylesheet" />
</head>
<body>
<img id="teh" src="image.png" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jque
浏览 120提问于2020-01-14得票数 1
回答已采纳
当我试图加载ng-cropper指令时，我正在接收TypeError: Cannot read property 'bind' of undefined.，该指令是对cropping图像裁剪库的角绑定。我不完全确定哪些代码可能是最相关的，但这是指令的前半部分：
angular.module('ngCropper', ['ng'])
.directive('ngCropper', ['$q', '$parse', function($q, $parse) {
return {
restri
浏览 0提问于2016-01-13得票数 0
回答已采纳
1回答
在我的symfony项目中，我使用的是PrestaImageBundle ，我已经安装了cropper，正如文档中所述，但在上传图像时，我在控制台中遇到了以下错误：
未捕获的函数: this.$container.$preview.children(...).cropper不是Cropper../vendor/presta/image-bundle/Resources/public/js/cropper.js.Cropper.prepareCropping ( FileReader.reader.onload ) at FileReader.reader.onload (cropper.js:
浏览 20提问于2020-05-26得票数 0
回答已采纳
我正在使用jspm安装npm:cropper
它安装裁剪器，并在package.json中添加" cropper "："npm:cropper@^2.0.1“，我可以在\jspm_packages\npm文件夹下找到它。
但是它没有加载在网络标签中。你知道少了什么吗？
P.S:-我没有找到cropper.js的类型定义，所以我声明了
declare var cropper: any;
declare module "cropper" {
export = cropper;
}
并将其作为import *从“cropper”导入；这没有造成任何错误
浏览 0提问于2015-11-23得票数 0
回答已采纳
我对JS完全是个新手，我正在尝试使用Cropper.js。我也不能在README上运行给定的示例。这是我正在尝试运行的代码： //import Cropper from 'cropperjs';
let image = document.getElementById('img');
const cropper = new Cropper(image, {
aspectRatio: 16 / 9,
crop(event) {
console.log(event.detail.x);
console.log(event.detail.
浏览 242提问于2020-01-24得票数 1
我修改了cropper.js库网站()中的示例。
此示例的原始版本：
我的版本：
var image1
var cropper1
var image2
var cropper2
function cropperInstances() {
image1 = document.querySelector('#image1');
cropper1 = new Cropper(image1, {
dragMode: 'move',
aspectRatio: 1 / 1,
浏览 4提问于2021-07-08得票数 0
我正在使用cropper.js裁剪图像的一部分，然后尝试使用Tesseract js从其中提取文本。我的问题是，在某些情况下，它不能识别简单的文本，示例如下。
我也用同样的样本在Amazon Textract上做了一些测试，仍然得到了同样的问题，所以我的猜测是裁剪的图像有问题。有没有人有在OCR之前预处理图像的经验，这也需要在JS的帮助下进行
浏览 3提问于2021-07-14得票数 0
1回答
在我的Range2应用程序中，我导入如下所示
npm安装
在.角-cli.json中，添加
"styles": [
"../node_modules/cropperjs/dist/cropper.min.css"
],
"scripts": [
"../node_modules/cropperjs/dist/cropper.min.js"
],
在app.component.ts中。我引进了Cropper，遵循
import * as Cropper from 'cropperjs
浏览 1提问于2017-03-30得票数 1
我正在使用cropper.js ()来操作图像，但我无法找到一种以编程方式裁剪图像的方法。
我想要做的是在初始化裁剪器之后立即创建一个裁剪预览。
var cropper = new Cropper(document.getElementById('img'), {
autoCrop: true,
autoCropArea: 1,
aspectRatio: 500 / 660,
minCropBoxWidth: 500,
minCropBoxHeight: 660,
viewMode: 2
});
我已经启用了autoCrop，但是
浏览 0提问于2018-05-13得票数 5
回答已采纳
1回答
我正在使用做一些我正在做的事情，但是让它正常工作有点困难，是否有可能看到我可能做错了什么。
该图像“复制”在网页上。(例如，这里使用随机图像)
我的Html，图像：
<img id="ImageFrame" src="http://www.availstaffing.com/wp-content/uploads/2010/07/Temporary-Button.jpg" style="max-width:100%" />
我的javascript：
$(function () {
var image =
浏览 3提问于2016-06-30得票数 1
回答已采纳
1回答
我有以下Ajax upload (来自cropper.js的Base64画布数据)，所以Ajax上载不是来自表单。
$('.gogo').on('touchstart mousedown', function(e){
e.preventDefault();
e.stopPropagation();
var img = new Array();
img[0] = fetchCrop1();
img[1] = fetchCrop2();
$.ajax({
cache: false,
浏览 3提问于2018-04-06得票数 0
1回答
让用户下载被操纵的SVG
、、、、
我目前在一个网页上工作，用户将能够操纵世界地图的SVG文件，以他们的喜好。例如，用户可以选择所有欧洲国家，突出显示某些国家，并下载结果文件。
我知道你可以包含这样的下载链接：
<a href="/path/to/file.svg" download>
既然我没有将修改后的SVG存储在任何地方，我如何才能让用户下载他们修改后的SVG版本呢？
我以内联方式存储SVG，这样就可以直接从javascript文件中操作它的属性。
我研究了cropper.js，但这只适用于canvas和img对象。
浏览 2提问于2018-11-24得票数 2
我使用cropper.js作为cdn链接。我可以使用裁剪功能完全可以在第一次上传图像，但当我上传新的图像，现有的图像不会被改变在裁剪部分。如何用新的数据重新初始化cropper。
这里是我的完整代码：
function readURL(input) {
globalImage = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();
reader.onload = function readerOnload(e) {
浏览 3提问于2020-06-05得票数 2
1回答
当用户在裁剪时将光标拖出图像时，需要停止裁剪。
我的问题是，一旦用户离开图像并返回，裁剪的角落就会从光标上移开。这是不应该发生的。
下面是我创建的简单演示。
<link rel="stylesheet" href="https://fengyuanchen.github.io/cropper/css/cropper.css">
<link rel="stylesheet" href="https://fengyuanchen.github.io/cropper/css/main.css">
<di
浏览 24提问于2016-08-12得票数 7
1回答
我正在使用cropper.js工具从一个PDF文件中获取屏幕快照。我想要自定义的作物框工具-即添加一些自定义按钮在底部的作物框。在加载PDF文件时，cropper.js会创建一些DOM元素。里面有收割工具。其中之一是一个名为“作物-作物盒”的div。我正在尝试添加一个新的div，其中包含以下代码的一些按钮：
btnGroup = React.createElement('div', { className: 'cropper-button-group d-flex justify-content-center align-content-center' }, [
浏览 5提问于2022-10-12得票数 1
我开始在我的新Laravel5.7项目中使用Laravel将所有js/css编译成一个文件，它将出现在我的公共js/css目录中(每页一个)，如下所示：
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.js('resources/js/create.member.js', 'public/js/backend/members')
.sass('
浏览 0提问于2018-11-02得票数 2
回答已采纳
1回答
我正在从事一个django项目，该项目需要添加配置文件图片，而且该项目可以工作；但问题是，当有人上传一张相当长或相当宽的图片时，概要文件图像显示看起来会很奇怪。我尝试通过将以下内容添加到我的base.html中来初始化基本的cropperjs
<link rel="stylesheet" href="{% static 'cropperjs/dist/cropper.min.css' %}">
<script type="module" src="{% static 'cropperjs/dist
浏览 18提问于2022-04-21得票数 1
我目前正在尝试在DNN中扩展2sxc应用程序的功能。我创建了一个新的content-type并添加了我的自定义输入类型(使用cropper.js实现图像裁剪)，如本教程中所述：How To Create Custom Input Fields (v11.2) 它目前看起来是这样的： ? 并且数据当前以base64字符串的形式存储。 现在缺少的最后一件事是保存裁剪后的图像，如果可能的话，使用2sxc ADAM。我找到了这个教程：Recipe: Form Files SaveInADAM in Your Custom WebAPI，但是我不知道把cshtml文件放在哪里。下面是我当前的代码
浏览 16提问于2021-01-27得票数 1
回答已采纳
我有一个文件上传选项，上传图像后，我将其保存在文件系统中。然后，我展示了一个使用cropper.js库裁剪图像的选项，默认的x，y，宽度，高度和旋转值。
在用户界面中，用户可以改变裁剪区域，旋转，缩放图像，然后保存图像。单击保存按钮，我可以将x、y、width、height和rotate值传递给控制器函数。
现在我需要的是nuget包的建议，这样我就可以在后端处理图像与尊重的值(旋转，裁剪，调整大小)，并再次保存在文件系统中。
任何人，如果你有任何建议，请帮助我。
谢谢
浏览 21提问于2019-07-27得票数 4
1回答
我从来没有真正开发过jquery插件，而且我忽略了这个概念.我正在尝试修改这个，以便有一个新的回调来动态地设置高宽比。
因此，在cropper.js中，我添加了一个回调，如下所示：
Cropper.prototype = {
construstor: Cropper,
//init function with init code
//My new function
setAspectRatio: function(ratio) {
console.log(ratio);
this.disable();
this
浏览 3提问于2014-04-19得票数 0
回答已采纳
Cropper.js可以很好地处理第一张图像。当我上传一张新图片，然后裁剪它时，#result附加了两张图片。对于第三张上传的图片，#result附加了三个(！)图像。我自己也搞不懂为什么这个函数($("#btnCrop").on("mouseup"，function())在我每次上传新图片的时候执行的越来越多。有什么想法吗？ <div id="cropper" class="field personalization">
<div class="field-input">
&
浏览 43提问于2019-06-04得票数 0
回答已采纳
1回答
我正在使用Cropper.js库获取作物坐标、宽度和高度、客户端的图像，并在laravel 4中进行干预，将其实际与corp数据合并到服务器端。
JavaScript函数：
$('#image').cropper({
aspectRatio: 16 / 9,
crop: function (e) {
// To send cop data to server
x = e.x;
y = e.y;
width
浏览 3提问于2016-05-05得票数 1
2回答
我正在使用cropper.js来裁剪我所写的图像，该指令将接受图像src。
return {
restrict: 'A',
controller: _cropperController,
bindToController: {
imagesrc:"=?"
},
link:function($scope, $element, $attrs, ctrl){
var img = document.createElement("img&
浏览 0提问于2017-09-06得票数 2
我试图使一个表单，查看用户的个人资料，并显示一个用户的图片。我已经做了一个自定义的用户类，并添加了新的个人资料图片(头像)字段。想法是，当用户正在查看个人资料，他可以点击他的图片和模式表单弹出显示当前图片(或默认图片，看起来像匿名用户)。然后，用户可以点击上传任何大小的新图片，并使用cropper.js将其裁剪为设置为220x300像素的标准格式。
为了发展这一点，我在互联网上举了几个例子，并将它们混合在一起。它的工作没有任何缺陷，直到我希望保存在用户数据库中的新图片，这只是被忽略，没有显示任何错误。当然，当我从管理界面上传一张图片时，每次都能正常工作。
所以，我希望保存图片的部分是从模态表单
浏览 11提问于2019-11-17得票数 1
回答已采纳
1回答
我正在尝试构建一个插件，其中的一部分需要上传(或选择一个已经上传的)一个图像，当它完成上传以裁剪它(有点像您如何在WP_Customizer中更改标题图像)。
我目前有以下代码：
Index.php：
<div class="imagearea">
<div class="noimage">
<a class="select-image button button-primary button-large">Selecteer een foto</a>
</di
浏览 0提问于2015-12-15得票数 4
3回答
我在我的项目中使用，它包括版本^0.10.0，而我需要一些cropper版本0.11.1的方法。因此，我将其分叉到自己的GitHub存储库，并希望将其cropper升级到0.11.1。但我不知道该怎么做！
我是否必须重新构建这个模块并将其推到GitHub，然后通过package.json中的GitHub url安装它？
谢谢!
更新
我克隆了react到本地，更新了package.json，然后安装了npm。它引发了错误: ENOENT，没有这样的文件或目录‘dist/react cropper.js’。然后我成功地安装了mkdir dist和npm。下一步怎么办？
更新了2，在遵循@Mi
浏览 2提问于2015-09-08得票数 0
我正努力让农民们在苗条的土地上工作。任何帮助都将不胜感激。
svelte脚本如下所示
<script>
import Cropper from 'cropperjs';
const image = document.getElementById('image');
const cropper = new Cropper(image, {
aspectRatio: 16 / 9,
crop(event) {
console.log(event.detail.x);
console.log(event.detail.y);
浏览 8提问于2022-01-27得票数 2
回答已采纳
使用cropper.js，我可以裁剪/调整图像的大小，但是有什么方法，例如，从图像中删除文本吗？还是画画？那么保存还是下载？
谢谢你的帮助
$('#edit_img').click(function(){
$('#image').cropper({
aspectRatio: 'auto',
crop: function(e) {
}
});
});
$("#reset").click(function() {
$('#image').cropper("reset
浏览 2提问于2017-09-22得票数 0
回答已采纳
在我的一个项目中，我正在使用风元晨jquery裁剪插件进行图像处理。该插件用于在图像处理后将图像下载到本地系统。实际上，我希望将处理后的图像存储到服务器本身，而不是将其下载到本地系统。为此，我需要在文本区域中获取经过处理的图像的URI数据。我必须在插件代码中做什么修改才能生成URI数据而不是下载？
项目中有三个文件，分别名为index.php、cropper.js和main.js
index.php中的下载按钮代码如下：
<div class="btn-group btn-group-crop docs-buttons" style="margin-top:10p
浏览 0提问于2016-09-09得票数 0
我在MVC5Razor页面上使用cropper.js，我不想让用户用鼠标选择裁剪区域，我想初始化裁剪对象的预定义裁剪(选定)区域，用户无法调整大小，但用户可以移动裁剪区域的图片裁剪的一部分。 我没有找到任何选项来禁用剪辑，我检查了他们的Git page，它看起来没有能力，而且我在Git page上发布了我的请求，但没有得到任何回应。我需要帮助，我怎样才能解决这个问题。 window.onload = function() {
var Cropper = window.Cropper;
var URL = window.UR
浏览 73提问于2019-09-26得票数 0
回答已采纳
为了向我的一个 /Jinja页面添加图像裁剪支持，我遵循了GitHub上的<head>，将CSS链接添加到HTML页面的<head>中，并将以下内容添加到页面的<body>中：
<script src="/static/assets/js/plugins/cropper.min.js" type="module"></script>
<script>
import Cropper from "cropperjs";
const image = documen
浏览 7提问于2020-07-02得票数 2
回答已采纳
2回答
我使用带有自定义函数的将8个未压缩的JavaScript文件组合成一个压缩(小型化)文件，如下所示：
<?php
// Filename: js.php
header('Content-type: text/javascript');
require_once '../JShrink.php';
function concatenateFiles($files)
{
$buffer = '';
foreach($files as $file) {
$buffer .= file_get_contents
浏览 6提问于2017-02-18得票数 0
回答已采纳
当用户上传图像时，我想要裁剪图像，在剪切之后，我希望将其保存在数据库中。我想用种植者或种植者来做。如果我使用服务器中的图像，一切都很好，但是当我想使用上传的文件时，裁剪器就不能工作了。
<input type="file" id="fileinput" accept="image/*" />
<button class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">Large
浏览 3提问于2016-05-27得票数 1
回答已采纳
1回答
如何保存图像而不剪裁？
、、、
我使用Dropzonejs和Cropperjs。当前流是选择一个图像，裁剪它并保存它。
我想选择一个图像并给用户两个选项
1)作物然后保存
( 2)取消作物种植，不作种植保存。
默认情况下，第一个选项在cropperjs中可用。但是，我如何添加一个cancel按钮，它应该将图像发送到下拉区域，而不需要裁剪。简单地说，我想要原来选择的图像在下拉区域。
Dropzone JS配置代码：
Dropzone.autoDiscover = false;
// Dropzone Configurations
var dropzone = new Dropzone('#story-thum
浏览 0提问于2019-05-31得票数 2
回答已采纳
1回答
我正在使用在我的网站上裁剪照片。我已经遵循了页面中的所有步骤，但我得到的一些error.the第一个错误是Uncaught ReferenceError: Cropper是未定义的.so，我添加了var Cropper = window.Cropper statement.when，我重新加载了该页面，我得到了另一个错误Uncaught TypeError: Cropper不是构造函数.but，只是他们把选项传递给了Cropper构造函数，不知道出了什么问题。
<!doctype html>
<html lang="en">
<head>
浏览 3提问于2016-05-27得票数 7
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
