(Rails) IMGKIT - 使用 html 和 css 导出图像的问题 [英] (Rails) IMGKIT - Issues in exporting images with html and css

问题描述

我在我的一个项目中使用 IMGKIT，并且不得不使用带有 html 选项的 css 来满足要求.我注意到如果样式表设置如下:

I'm using IMGKIT in one of my projects and had to use their css with html option to satisfy a requirment. I noticed that if stylesheets are set as follows:

kit = IMGKit.new(html, :quality => 50)
kit.stylesheets << '/path/to/css/file'

并且样式表具有带有相对 url('image.png') 的背景属性，使用 kit.to_file 导出时不会生成图像:

and the stylesheet has a background property with a relative url('image.png'), image is not generated when exporting it using kit.to_file:

(Rails.root + "public/pngs/" + "image.png")

请求挂了，如果我们用协议、主机和端口将后台url替换为完整的url，就可以很好地导出了.

The request hangs, and if we replace the background url to full url with protocol, host and port, it is well exported.

我的样式表中的所有图片都需要绝对网址吗?

Do I need to have absolute urls to all my images in my stylesheet?

我尝试在我的 development.rb 文件中定义 asset_host:

I have tried defining asset_host in my development.rb file:

config.action_controller.asset_host = Proc.new { |source|
     "#{request.protocol}#{request.host_with_port}"
    }

如果我检查浏览器，它确实替换了 css 中的 url，但通过 IMGKIT 导出时仍然没有生成图像.

It does replace the url in the css if I check on browser but still the images are not generated when exported through IMGKIT.

推荐答案

IMGKIT 要求 css 为任何背景图像或其他资产提供绝对 url.因此，您可以按照此链接 https://coderwall.com/p/exj0ig 和一些步骤动态生成它作为

IMGKIT reqiured css with absolute url for any background image or other assets. So you can generate it dynamically following this link https://coderwall.com/p/exj0ig and some steps as

A) 将所有图片放在 rails 应用的 assets/images 文件夹中

A) Put your all images in assets/images folder of rails app

B) 如果没有安装，请安装 gem 'sass-rails' https://github.com/rails/sass-rails

B) Install gem 'sass-rails' if not install https://github.com/rails/sass-rails

C) 创建另一个 css 文件名作为 css_file_name.css.sccs.erb

C) create another css file name as css_file_name.css.sccs.erb

D) 将所有其他 css 文件内容放入其中.

D) put your all other css file content in it.

E) 在 css 文件中输入您的图像文件名，如下所示:背景图片:图片网址('image.png');

E) In css file just put your image file name as below: background-image: image-url('image.png');

F) 使用资产管道(http://guides.rubyonrails.org/asset_pipeline.html#how-to-use-the-asset-pipeline)运行以下命令作为您的应用程序模式:(1) 开发模式:RAILS_ENV=development bundle exec rake assets:precompile(2) 生产模式:RAILS_ENV=production bundle exec rake assets:precompile

F) Use assets pipline (http://guides.rubyonrails.org/asset_pipeline.html#how-to-use-the-asset-pipeline) Run below command as your app mode: (1) Development Mode: RAILS_ENV=development bundle exec rake assets:precompile (2) Production Mode: RAILS_ENV=production bundle exec rake assets:precompile

G) 在您的配置/环境/

(1) 在 development.rbconfig.action_controller.asset_host = "您的本地主机 URL，即您的本地主机地址"

(1) In development.rb config.action_controller.asset_host = "YOUR LOCAL HOST URL i.e YOUR_LOCALHOST_ADDRESS"

(2) 在 production.rbconfig.action_controller.asset_host = "http://assets.example.com"/您的地址/

(2) In production.rb config.action_controller.asset_host = "http://assets.example.com" /YOUR ADDRESS/

H) 最后将您的样式表与 IMGKIT 相关联，如下所示

H) And last relate your stylesheet with IMGKIT as below

html_content = "YOUR HTML CONTENT"
kit = IMGKit.new(html_content, height: 900, transparent:true, quality:10) /*YOUR SETTING*/
kit.stylesheets << "#{Rails.root}/public/assets/application.css"
file = kit.to_file(Rails.root + "public/pngs/" + "screenshot.png") /*YOUR IMAGE NAME*/
send_file("#{Rails.root}/public/pngs/screenshot.png", :filename => "screenshot.png", :type => "image/png",:disposition => 'attachment',:streaming=> 'true') /*YOUR ADDRESS WHERE U WANT TO STORE PNG FILE*/

I) 重启服务器，享受！！！！！！

I) Restart server and enjoy!!!!!

[注意:每次更改后，请运行 assets pipline 命令以获取由 .sccs.erb 扩展文件制成的最新 application.css.]

[NOTE: After every changes please run assets pipline command to get latest application.css which is made from .sccs.erb extension file.]

这篇关于(Rails) IMGKIT - 使用 html 和 css 导出图像的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！