- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我对这个插件非常失望。我是 JS/Jquery 的新手,但我的网站非常需要这个插件...所以我在这里找到了 cropit:http://scottcheng.github.io/cropit/
我不知道如何在我的 Controller 中取回我裁剪过的图像并保存它...所以我的表格是:
<div class="form-group">
{{ form_label(form.image, 'Image', {'label_attr': {'class': 'col-sm-3 control-label'}})}}
<div class="image-cropper">
<!-- This is where the preview image is displayed -->
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<div class="cropit-image-preview-container">
<div class="cropit-image-preview"></div>
</div>
</div>
</div>
<!-- This range input controls zoom -->
<!-- You can add additional elements here, e.g. the image icons -->
<div class="row">
<div class="col-sm-offset-4 col-sm-4">
<input type="range" class="cropit-image-zoom-input" />
</div>
</div>
{{ form_errors(form.image) }}
<div class="row">
<div class="col-sm-4">
{{ form_widget(form.image) }}
<div class="select-image-btn">Select new image</div>
<div class="send_image">Get Cropped image.</div>
</div>
</div>
</div>
</div>
我的 Jquery 代码:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="{{ asset('js/cropit-master/dist/jquery.cropit.js') }}"></script>
<script>
$(function () {
$('.select-image-btn').click(function(){
$('.cropit-image-input').click();
});
var z = $('.image-cropper');
z.cropit({
exportZoom: 0.5,
imageBackground: true,
imageBackgroundBorderWidth: 15
});
$('.send_image').click(function() {
var h =z.cropit('export');
alert(h);
});
});
</script>
我的 Image.php 实体:
public function getFile()
{
return $this->file;
}
public function setFile(UploadedFile $file = null)
{
$decoded = urldecode($file);
$exp = explode(';', $decoded);
$exp = explode(':', $exp[0]);
$data = array_pop($exp);
$this->file = imagecreatefromstring($file);
if (null !== $this->url) {
$this->tempFilename = $this->url;
$this->url = null;
$this->alt = null;
}
}
/**
* @ORM\PrePersist()
* @ORM\PreUpdate()
*/
public function preUpload()
{
if (null === $this->file) {
return;
}
$this->url = $this->file->guessExtension();
$this->alt = $this->file->getClientOriginalName();
}
/**
* @ORM\PostPersist()
* @ORM\PostUpdate()
*/
public function upload()
{
if (null === $this->file) {
return;
}
if (null !== $this->tempFilename) {
$oldFile = $this->getUploadRootDir().'/'.$this->id.'.'.$this->tempFilename;
if (file_exists($oldFile)) {
unlink($oldFile);
}
}
$this->file->move(
$this->getUploadRootDir(), // Le répertoire de destination
$this->id.'.'.$this->url // Le nom du fichier à créer, ici « id.extension »
);
}
/**
* @ORM\PreRemove()
*/
public function preRemoveUpload()
{
$this->tempFilename = $this->getUploadRootDir().'/'.$this->id.'.'.$this->url;
}
/**
* @ORM\PostRemove()
*/
public function removeUpload()
{
if (file_exists($this->tempFilename)) {
// On supprime le fichier
unlink($this->tempFilename);
}
}
public function getUploadDir()
{
// On retourne le chemin relatif vers l'image pour un navigateur
return 'uploads/img';
}
protected function getUploadRootDir()
{
// On retourne le chemin relatif vers l'image pour notre code PHP
return __DIR__.'/../../../../web/'.$this->getUploadDir();
}
public function getWebPath()
{
return $this->getUploadDir().'/'.$this->getId().'.'.$this->getUrl();
}
我看了很多帖子,但没有一个对我有用,我也不是很明白。所以有人可以帮我解释一下吗?谢谢
已编辑:我的第一个方法
我的表单有一个隐藏的输入来保存 base64 数据:
$('form').submit(function() {
// Move cropped image data to hidden input
var imageData = $('.image-cropper').cropit('export');
$('.hidden-image-data').val(imageData);
};``
我的 Imagetype 带有文件输入以加载原始图像和隐藏输入以保存 base64 图像。
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('file', 'file', array(
'attr' => array('class' => 'cropit-image-input')))
->add('file', 'hidden', array('attr' => array('class' => 'hidden-image-data')))
;
}
我的 Controller 还是一样。
最佳答案
我已经解决了。
另外使用 VichUploaderBundle
@K-Phoen 的回复对于指导解决方案非常有用。 VichUploaderBundle & Cropit - Pass base64 to a File instance
这是我的代码:
User.php,这个和更多 VichUploaderBundle 设置 look here
namespace Application\Sonata\UserBundle\Entity;
//...
use Vich\UploaderBundle\Mapping\Annotation as Vich;
/**
* User
*
* ........
* ........
* @Vich\Uploadable
* ........
* ........
*
*/
class User extends BaseUser {
/**
* NOTE: This is not a mapped field of entity metadata, just a simple property.
*
* @Vich\UploadableField(mapping="user_avatar", fileNameProperty="avatarName")
*
* @var File
*/
private $avatar;
/**
* @ORM\Column(type="string", length=255)
*
* @var string
*/
private $avatarName;
/**
* @ORM\Column(type="datetime")
*
* @var \DateTime
*/
private $updatedAt;
//....
/**
* If manually uploading a file (i.e. not using Symfony Form) ensure an instance
* of 'UploadedFile' is injected into this setter to trigger the update. If this
* bundle's configuration parameter 'inject_on_load' is set to 'true' this setter
* must be able to accept an instance of 'File' as the bundle will inject one here
* during Doctrine hydration.
*
* @param File|\Symfony\Component\HttpFoundation\File\UploadedFile $image
*/
public function setAvatar(File $image = null) {
$this->avatar= $image;
if ($image) {
// It is required that at least one field changes if you are using doctrine
// otherwise the event listeners won't be called and the file is lost
$this->updatedAt = new \DateTime('now');
}
}
/**
* @return File
*/
public function getAvatar() {
return $this->avatar;
}
/**
* @param string $avatarName
*/
public function setAvatarName($avatarName) {
$this->avatarName= $avatarName;
}
/**
* @return string
*/
public function getAvatarName() {
return $this->avatarName;
}
}
UserType.php
namespace AppBundle\Form;
//...
use Doctrine\Common\Persistence\ObjectManager;
use AppBundle\Form\DataTransformer\ImageStringToFileTransformer;
class UserType extends AbstractType {
private $manager;
public function __construct(ObjectManager $manager)
{
$this->manager = $manager;
}
/**
* @param FormBuilderInterface $builder
* @param array $options
*/
public function buildForm(FormBuilderInterface $builder, array $options) {
$builder
->add('avatar', 'hidden', [
'attr' => [
'class' => 'hidden-image-data'
]
])
->add('imagedata', 'file', [
'mapped' => false,
'required' => false,
'attr' => [
'class' => 'cropit-image-input'
]
])
//...
;
$builder->get('avatar')
->addModelTransformer(new ImageStringToFileTransformer($this->manager));
}
//...
}
ImageStringToFileTransformer.php,这里魔术完成了,我们将 base64 字符串转换为 UploadedFile
namespace AppBundle\Form\DataTransformer;
use Symfony\Component\Form\DataTransformerInterface;
use Doctrine\Common\Persistence\ObjectManager;
use Symfony\Component\HttpFoundation\File\UploadedFile;
/**
* Description of ImageStringToFileTransformer
*
* @author Juanjo García
*/
class ImageStringToFileTransformer implements DataTransformerInterface {
private $manager;
public function __construct(ObjectManager $manager) {
$this->manager = $manager;
}
/**
* Transforms a string (base64) to an object (File).
*
* @param string $imageString
* @return File|null
* @throws TransformationFailedException if no object (File)
*/
public function reverseTransform($imageString) {
// no base64? It's optional, so that's ok
if (!$imageString) {
return;
}
preg_match('/data:([^;]*);base64,(.*)/', $imageString, $matches);
$mimeType = $matches[1];
$imagenDecodificada = base64_decode($matches[2]);
$filePath = sys_get_temp_dir() . "/" . uniqid() . '.png';
file_put_contents($filePath, $imagenDecodificada);
$file = new UploadedFile($filePath, "user.png", $mimeType, null, null, true);
if (null === $file) {
// causes a validation error
// this message is not shown to the user
// see the invalid_message option
throw new TransformationFailedException(sprintf(
'An issue with number "%s" does not exist!', $imageString
));
}
return $file;
}
/**
* Transforms an object (File) to a string (base64).
*
* @param File|null $file
* @return string
*/
public function transform($file) {
return '';
}
}
服务.yml
services:
# datatransformer before saving to image
app.form.type.user:
class: AppBundle\Form\UserType
arguments:
entityManager: "@doctrine.orm.entity_manager"
tags:
-
name: form.type
在我的 Twig 中,my_form.html.twig
<script src="{{ asset('jquery.js') }}"></script>
<script src="{{ asset('jquery.cropit.js') }}"></script>
<script src="{{ asset('jquery.custom.js') }}"></script>
{% form_theme form with ['AppBundle:Forms:vich_cropit_fields.html.twig'] %}
{{ form_start(form, {'action': path('the_path'), 'method': 'POST', 'multipart': true, 'attr': {'class': 'the_class', 'role': 'form'} }) }}
<div class="image-editor">
<div class="cropit-image-preview-container">
<div class="cropit-image-preview"></div>
</div>
{{ form_widget(form.avatar) }}
{{ form_widget(form.imagedata) }}
<div class="image-size-label">
Resize image
</div>
<input type="range" class="cropit-image-zoom-input">
{% if app.user.avatarName %}
<img src="{{ vich_uploader_asset(app.user, 'avatar') }}" id="current-avatar" class="hide" />
{% endif %}
</div>
{{ form_rest(form) }}
<button type="submit" name="submit">Save</button>
{{ form_end(form) }}
初始化 Cropit,jquery.custom.js
(function ($) {
$('.image-editor').cropit({
exportZoom: 0.5,
imageBackground: true,
imageBackgroundBorderWidth: 50
});
$('.image-editor').cropit('imageSrc', $("#current-avatar").attr('src'));
$('form').submit(function () {
// Move cropped image data to hidden input
var imageData = $('.image-editor').cropit('export');
$('.hidden-image-data').val(imageData);
});
}).apply(this, [jQuery]);
由于我在任何地方都没有找到解决方案的答案,所以我决定离开这里,以供所有需要的人使用。希望对您有所帮助。
关于php - Symfony2-Cropit |如何找回我裁剪过的图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33973022/
我正在尝试学习 Knockout 并尝试创建一个照片 uploader 。我已成功将一些图像存储在数组中。现在我想回帖。在我的 knockout 码(Javascript)中,我这样做: 我在 Jav
我正在使用 php 编写脚本。我的典型问题是如何在 mysql 中添加一个有很多替代文本和图像的问题。想象一下有机化学中具有苯结构的描述。 最有效的方法是什么?据我所知,如果我有一个图像,我可以在数据
我在两个图像之间有一个按钮,我想将按钮居中到图像高度。有人可以帮帮我吗? Entrar
下面的代码示例可以在这里查看 - http://dev.touch-akl.com/celebtrations/ 我一直在尝试做的是在 Canvas 上绘制 2 个图像(发光,然后耀斑。这些图像的链接
请检查此https://jsfiddle.net/rhbwpn19/4/ 图像预览对于第一篇帖子工作正常,但对于其他帖子则不然。 我应该在这里改变什么? function readURL(input)
我对 Canvas 有疑问。我可以用单个图像绘制 Canvas ,但我不能用单独的图像绘制每个 Canvas 。- 如果数据只有一个图像,它工作正常,但数据有多个图像,它不工作你能帮帮我吗? va
我的问题很简单。如何获取 UIImage 的扩展类型?我只能将图像作为 UIImage 而不是它的名称。图像可以是静态的,也可以从手机图库甚至文件路径中获取。如果有人可以为此提供一点帮助,将不胜感激。
我有一个包含 67 个独立路径的 SVG 图像。 是否有任何库/教程可以为每个路径创建单独的光栅图像(例如 PNG),并可能根据路径 ID 命名它们? 最佳答案 谢谢大家。我最终使用了两个答案的组合。
我想将鼠标悬停在一张图片(音乐专辑)上,然后播放一张唱片,所以我希望它向右移动并旋转一点,当它悬停时我希望它恢复正常动画片。它已经可以向右移动,但我无法让它随之旋转。我喜欢让它尽可能简单,因为我不是编
Retina iOS 设备不显示@2X 图像,它显示 1X 图像。 我正在使用 Xcode 4.2.1 Build 4D502,该应用程序的目标是 iOS 5。 我创建了一个测试应用(主/细节)并添加
我正在尝试从头开始以 Angular 实现图像 slider ,并尝试复制 w3school基于图像 slider 。 下面我尝试用 Angular 实现,谁能指导我如何使用 Angular 实现?
我正在尝试获取图像的图像数据,其中 w= 图像宽度,h = 图像高度 for (int i = x; i imageData[pos]>0) //Taking data (here is the pr
我的网页最初通过在 javascript 中动态创建图像填充了大约 1000 个缩略图。由于权限问题,我迁移到 suPHP。现在不用标准 标签本身 我正在通过这个 php 脚本进行检索 $file
我正在尝试将 python opencv 图像转换为 QPixmap。 我按照指示显示Page Link我的代码附在下面 img = cv2.imread('test.png')[:,:,::1]/2
我试图在这个 Repository 中找出语义分割数据集的 NYU-v2 . 我很难理解图像标签是如何存储的。 例如,给定以下图像: 对应的标签图片为: 现在,如果我在 OpenCV 中打开标签图像,
import java.util.Random; class svg{ public static void main(String[] args){ String f="\"
我有一张 8x8 的图片。 (位图 - 可以更改) 我想做的是能够绘制一个形状,给定一个 Path 和 Paint 对象到我的 SurfaceView 上。 目前我所能做的就是用纯色填充形状。我怎样才
要在页面上显示图像,你需要使用源属性(src)。src 指 source 。源属性的值是图像的 URL 地址。 定义图像的语法是: 在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此
**MMEditing是基于PyTorch的图像&视频编辑开源工具箱,支持图像和视频超分辨率(super-resolution)、图像修复(inpainting)、图像抠图(matting)、
我正在尝试通过资源文件将图像插入到我的程序中,如下所示: green.png other files 当我尝试使用 QImage 或 QPixm
我是一名优秀的程序员,十分优秀!