我在表单对象中使用神社 gem,我想剪辑图像,所以,我跟着https://github.com/shrinerb/shrine/wiki/Image-Cropping,但是,发生了上面的错误,我认为它似乎是不认识照片模型
意见
<%= form_with model: @blog_form , url: user_blogs_path ,local: true do |f| %>
<div class="field">
<% f.label :title %>
<%= f.text_field :title %>
</div>
<div class="field">
<% f.label :content %>
<%= f.text_area :content %>
</div>
<div class="field">
<% f.label :user_id %>
<%= f.hidden_field :user_id, value: current_user.id %>
</div>
<div class ="field">
<%= f.fields_for :photos, @blog_form do |photos_fileds| %>
<%= photos_fileds.label :image %>
<%= photos_fileds.hidden_field :image, value: photos_fileds.cached_image_data if defined?
(photos_filed.cached_image_data) %>
%= photos_fileds.file_field :image %><br/>
<div>
<img id="image" src="<%= photos_fileds.image_url %>"
</div>
<% end %>
</div>
image_uploader
require "vips"
require "image_processing/vips"
class ImageUploader < Shrine
plugin :derivatives
THUMBNAILS = {
large: [800, 800],
medium: [600, 600],
small: [300, 300],
}
Attacher.derivatives do |original|
vips = ImageProcessing::Vips.source(original)
vips = vips.crop(*file.crop_points) # apply cropping
THUMBNAILS.transform_values do |(width, height)|
vips.resize_to_limit!(width, height)
end
end
plugin :derivation_endpoint, prefix: "derivations/image"
# Default URLs of missing derivatives to on-the-fly processing.
Attacher.default_url do |derivative: nil, **|
next unless derivative && file
file.derivation_url :transform, shrine_class.urlsafe_serialize(
crop: file.crop_points,
resize_to_limit: THUMBNAILS.fetch(derivative),
)
end
# Generic derivation that applies a given sequence of transformations.
derivation :transform do |file, transformations|
transformations = shrine_class.urlsafe_deserialize(transformations)
vips = ImageProcessing::Vips.source(file)
vips.apply!(transformations)
end
end
class UploadedFile
# convenience method for fetching crop points from metadata
def crop_points
metadata.fetch("crop").fetch_values("x", "y", "width", "height")
end
end
神社.rb
require "shrine"
require "shrine/storage/file_system"
Shrine.storages = {
cache: Shrine::Storage::FileSystem.new("app/assets/images", prefix: "uploads/cache"), # temporary
store: Shrine::Storage::FileSystem.new("app/assets/images", prefix: "uploads"), # permanent
}
Shrine.plugin :activerecord # loads Active Record integration
Shrine.plugin :cached_attachment_data # enables retaining cached file across form redisplays
Shrine.plugin :restore_cached_data # extracts metadata for assigned cached files
Shrine.plugin :determine_mime_type
Shrine.plugin :derivatives
Shrine.plugin :backgrounding
Shrine::Attacher.promote_block { PromoteJob.perform_later(record, name, file_data) }
Shrine::Attacher.destroy_block { DestroyJob.perform_later(data) }
Shrine.plugin :derivation_endpoint, secret_key: Rails.application.secret_key_base
Shrine.plugin :default_url
裁剪框.js
import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'
function cropbox(image, url, { onCrop }) {
image.src = url
new Cropper(image, {
aspectRatio: 1,
viewMode: 1,
guides: false,
autoCropArea: 1.0,
background: false,
zoomable: false,
crop: event => onCrop(event.detail)
})
}
export default cropbox
文件上传.js
import cropbox from 'cropbox'
// ...
uppy.on('upload-success', (file, response) => {
// retrieve uploaded file data
const uploadedFileData = response.body['data']
// set hidden field value to the uploaded file data so that it's submitted
// with the form as the attachment
hiddenInput.value = JSON.stringify(uploadedFileData)
cropbox(imagePreview, response.uploadURL, {
onCrop(detail) {
let fileData = JSON.parse(hiddenInput.value)
fileData['metadata']['crop'] = detail
hiddenInput.value = JSON.stringify(fileData)
}
})
})
促进工作.rb
class PromoteJob < ApplicationJob
def perform(record, name, file_data)
attacher = Shrine::Attacher.retrieve(model: record, name: name, file: file_data)
attacher.create_derivatives
attacher.atomic_promote
end
end
销毁作业.rb
class DestroyJob < ApplicationJob
def perform(data)
attacher = Shrine::Attacher.from_data(data)
attacher.destroy
end
end
路由.rb
Rails.application.routes.draw do
mount ImageUploader.derivation_endpoint => "/derivations/image"
get 'sessions/new'
devise_for :users
resources :users do
resources :blogs
end
# For details on the DSL available within this file, see
https://guides.rubyonrails.org/routing.html
end
blog_form.rb
class BlogForm
include ActiveModel::Model
attr_accessor :title, :content, :user_id , :photos, :tag_list
def blog_builder
@user = User.find(user_id)
@blogs = @user.blogs.create(title: title , content: content )
end
concerning :PhotosBuilder do
attr_reader :photos_attributes
def photos
@photos ||= Photo.new
end
def photos_attributes=(attributes)
debugger
@photos ||= Photo.new(attributes)
end
end
def build_association
@blogs.photos << @photos if photos?
@user.photos << @photos if photos
end
def save
return false if invalid?
blog_builder
@blogs.save
@photos.save if @photos != nil
build_association
end
def photos?
return true if @photos != nil
end
end
控制器
def new
@user = params[:user_id]
@blog_form = BlogForm.new
end
def create
debugger
@blog_form = BlogForm.new(add_params) if has_a_tags? == true
@blog_form = BlogForm.new(blog_form_params)
if @blog_form.save
redirect_to user_blogs_path
else
#False action
end
end
谢谢你,janko-m,arieljuod 我重写了视图,然后发生了新错误
前
ActionView::Template::Error (undefined method `image_url' for #
<ActionView::Helpers::FormBuilder:0x00007f9228150380>):
<%= photos_fileds.hidden_field :image, value: photos.cached_image_data if
defined?(photos.cached_image_data) %>
<%= photos_fileds.file_field :image %><br/>
<div>
<img id="image" src="<%= photos_fileds.image_url %>"
</div>
<% end %>
后
ActionView::Template::Error (undefined method `image_url' for #
<BlogForm:0x00007f9228090a58>):
<%= photos_fileds.hidden_field :image, value:
photos_fileds.cached_image_data if defined?
(photos_filed.cached_image_data) %>
<%= photos_fileds.file_field :image %><br/>
<div>
<img id="image" src="<%= photos_fileds.object.image_url %>" />
</div>
<% end %>
环境轨道 6.0.2 红宝石 2.5.3