Skip to content

Instantly share code, notes, and snippets.

@equivalent
Last active July 6, 2020 12:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save equivalent/02aa376f8552f79cf50dd096dd7e47f5 to your computer and use it in GitHub Desktop.
Save equivalent/02aa376f8552f79cf50dd096dd7e47f5 to your computer and use it in GitHub Desktop.
trying out htmlcsstoimage.com
def x
user_id = Rails.application.credentials.dig(:htmlcsstoimage, :user_id) #this will return my Htmlcsstoimage user_id
key = Rails.application.credentials.dig(:htmlcsstoimage, :key) #this will return my Htmlcsstoimage key
auth = { username: user_id, password: key }
html = '<body>'
html += '<h1>Rose Tattoo</h1>'
html += '<h2>Dropkick Murphys</h2>'
html +=<<EOF
<p>
The pictures tell the story</br>
This life has many shades</br>
I'd wake up every morning and before I'd start each day</br>
I'd take a drag from last night's cigarette</br>
That smoldered in it's tray</br>
Down a little something and then be on my way</br>
</p>
<p>
I traveled far and wide</br>
And laid this head in many ports</br>
I was guided by a compass</br>
I saw beauty to the north</br>
I drew the tales of many lives</br>
And wore the faces of my own</br>
I had these memories all around me</br>
So I wouldn't be alone</br>
</p>
<p>
Some may be from showing up</br>
Others are from growing up</br>
Sometimes I was so messed up and didn't have a clue</br>
I ain't winning no one over</br>
I wear it just for you</br>
I've got your name written here</br>
In a rose tattoo</br>
</p>
<p>
In a rose tattoo</br>
In a rose tattoo</br>
I've got your name written here</br>
In a rose tattoo</br>
</p>
<p>
This one's for the mighty sea</br>
Mischief, gold and piracy</br>
This ones for the man that raised me</br>
Taught me sacrifice and bravery</br>
This one's for our favorite game</br>
Black and gold, we wave the flag</br>
This one's for my family name</br>
With pride I wear it to the grave</br>
</p>
<p>
Some may be from showing up</br>
Others are from growing up</br>
Sometimes I was so messed up and didn't have a clue</br>
I ain't winning no one over</br>
I wear it just for you</br>
I've got your name written here</br>
In a rose tattoo</br>
</p>
<p>
In a rose tattoo</br>
In a rose tattoo</br>
I've got your name written here</br>
In a rose tattoo</br>
In a rose tattoo</br>
In a rose tattoo</br>
I've got your name written here</br>
In a rose tattoo</br>
</p>
<p>
This one means the most to me</br>
Stays here for eternity</br>
A ship that always stays the course</br>
An anchor for my every choice</br>
</p>
<p>
A rose that shines down from above</br>
I signed and sealed these words in blood</br>
I heard them once, sung in a song</br>
It played again and we sang along</br>
</p>
<p>
You'll always be there with me</br>
Even if you're gone</br>
You'll always have my love</br>
Our memory will live on</br>
</p>
<p>
Some may be from showing up</br>
Others are from growing up</br>
Sometimes I was so messed up and didn't have a clue</br>
I ain't winning no one over</br>
I wear it just for you</br>
I've got your name written here</br>
In a rose tattoo</br>
</p>
<p>
In a rose tattoo</br>
In a rose tattoo</br>
I've got your name written here</br>
In a rose tattoo</br>
In a rose tattoo</br>
In a rose tattoo</br>
With pride I'll wear it to the grave for you</br>
In a rose tattoo</br>
In a rose tattoo</br>
I've got your name written here</br>
In a rose tattoo</br>
In a rose tattoo</br>
In a rose tattoo</br>
Signed and sealed in blood I would die for you</br>
</p>
<p>
Oh, oh, oh, oh, oh, oh</br>
Oh, oh, oh</br>
</p>
<p>
Oh, oh, oh, oh, oh, oh</br>
Oh, oh, oh</br>
</p>
EOF
html += '<h2>Encoding test</h2>'
html += "<div class='ping'>Pong 读写汉字 - 学中文 ... د ط ض ك ق. ف ث س ص ش چ خ ح ه. ڤ ذ ز ظ ج غ ع ة. م ن. و ل ر ي ى. ء أ إ ؤ ئ. ـِي ـِ ـٍ. ـُو ـُ ـٌ. ـَا ✅</</div>"
html += '</body>'
css = "
.ping { padding: 20px; }
p { margin: 20px 0; }
"
resp = HTTParty.post("https://hcti.io/v1/image", body: { html: html, css: css }, basic_auth: auth)
case resp.code
when 200
JSON.parse(resp.body)
else
raise "error occured: #{resp.body}"
end
end
@equivalent
Copy link
Author

equivalent commented Jun 30, 2020

I google out random Chinese and Arabic characters and testing if the https://docs.htmlcsstoimage.com/example-code/ruby is able to process different charset

appears it don't (outdated information, it works now)

https://hcti.io/v1/image/87cb8b58-1063-490d-be8e-298ce8d2ad84
87cb8b58-1063-490d-be8e-298ce8d2ad84

UPDATE 2020-07-06 Enocoding works now

htmlcsstoimage-with-br-test png

@equivalent
Copy link
Author

equivalent commented Jul 1, 2020

This gist / note is part of my Investigation around how to convert text to image discussed in https://www.reddit.com/r/rails/comments/hi14ou/can_you_recommend_convert_text_to_image_gems/

alternative - wkhtmltoimage / IMGKit

If you are interested in wkhtmltoimage & IMGKit example you can find it at https://gist.github.com/equivalent/27d4abbb78ea991778316526f87fff94

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment