TOPIC:

show qr code image before submit 4 years 8 months ago #186549

  • lovre's Avatar
  • lovre
  • Offline
  • User is blocked
  • User is blocked
  • Posts: 2667
  • Karma: 76
  • Thanks: 329
You could do this with the Canvas HTML5 element. You would draw the text and the image to the canvas and then create a link for the download.
1. Go to your Form, Add a section where you want the export option to show. Edit the sections description and insert the following code:
<canvas style="display: none;" id="mycanvas" width="150" height="150"></canvas>
<a id="canvjpg" download="somename_image.png">downloadjpg</a>

I have set the canvas to display: none but you can remove the style if you want to show the canvas as well.

2. And then use some code like this to draw to canvas, export to DataURL and in the end set the href for the download link:
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.src = ff_getElementByName('url').value;
context.drawImage(imageObj, 10, 10);
context.font = "40pt Calibri";
context.fillText(ff_getElementByName('url').value, 20, 20);

var dataURL = canvas.toDataURL("image/png", 1.0);
document.getElementById("canvjpg").href= dataURL;

Please try implementing this to your form and get back to us if you need any help with it.
Support Crosstec and get ALL EXTENSIONS and professional support for just $5
Here!
===========================================
Need to renew Pro Support?
Buy Here!
===========================================
Satisfied?
Consider a membership!
===========================================
Like us on Facebook
===========================================
The following user(s) said Thank You: deserteagle

Please Log in or Create an account to join the conversation.

Last edit: Post by lovre.

show qr code image before submit 4 years 8 months ago #186765

  • deserteagle's Avatar Topic Author
  • deserteagle
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Posts: 63
  • Thanks: 1
hi Lovre

I created a button and put above codes in the click action script, is it right way?

In my IE11 nothing happen ( I checked at w3school download only support after IE13).

In Chrome, 1st click will show up url text, 2nd click will show qrcode image, and download link became clickable, but there are only text in the png file no qrcode image. pls see attachment.
Everything is possible.
Attachments:

Please Log in or Create an account to join the conversation.

Last edit: Post by deserteagle. Reason: update screenshot

show qr code image before submit 4 years 8 months ago #188248

  • lovre's Avatar
  • lovre
  • Offline
  • User is blocked
  • User is blocked
  • Posts: 2667
  • Karma: 76
  • Thanks: 329
Hello,

I apologize, sorry to keep you waiting.

Please try this corrected code:
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.setAttribute('crossOrigin', 'anonymous');
imageObj.onload = function(){
         context.drawImage(imageObj, 10, 10);
         context.font = "40pt Calibri";
         context.fillText(ff_getElementByName('url').value, 50, 50);
         var dataURL = canvas.toDataURL("image/png", 1.0);
         document.getElementById("canvjpg").href= dataURL;
};
imageObj.src = ff_getElementByName('url').value;

You don't need an extra button for this, you just put your code in a place so it fires after the "url" element is populated and it should all be fine then. You never shared how/where did you implement your chart api so i can't offer a preciser explanation on where to put it.

EDIT: maybe you could export and share your form with us so we could get a better insight on how it works.

Please let us know how this code works for you.
Support Crosstec and get ALL EXTENSIONS and professional support for just $5
Here!
===========================================
Need to renew Pro Support?
Buy Here!
===========================================
Satisfied?
Consider a membership!
===========================================
Like us on Facebook
===========================================

Please Log in or Create an account to join the conversation.

Last edit: Post by lovre.

show qr code image before submit 4 years 7 months ago #191193

  • deserteagle's Avatar Topic Author
  • deserteagle
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Posts: 63
  • Thanks: 1
my qrcode api is simple, just use google api.

ff_getElementByName('qrcode_url').value = ' chart.googleapis.com/chart?cht=qr&chs=50...&chld=L|1&chl='+data [0].afsc;

I attached the form pkg.

File Attachment:

File Name: employee_n...tech.zip
File Size:22 KB
Everything is possible.
Attachments:

Please Log in or Create an account to join the conversation.

show qr code image before submit 4 years 7 months ago #191196

  • lovre's Avatar
  • lovre
  • Offline
  • User is blocked
  • User is blocked
  • Posts: 2667
  • Karma: 76
  • Thanks: 329
Hey,

you didn't get it to work with the last code?

Regards,

Lovre
Support Crosstec and get ALL EXTENSIONS and professional support for just $5
Here!
===========================================
Need to renew Pro Support?
Buy Here!
===========================================
Satisfied?
Consider a membership!
===========================================
Like us on Facebook
===========================================

Please Log in or Create an account to join the conversation.

show qr code image before submit 4 years 7 months ago #191459

  • deserteagle's Avatar Topic Author
  • deserteagle
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Posts: 63
  • Thanks: 1
hi lovre

it cant work.
1. put after my js code which populate image url into element "qrcode_url"
error in console: Unable to get property 'getContext' of undefined or null reference
2. put in a click action script of a button
after the element "qrcode_url" is populated, click the button, nothing happen, no error in console.

thanks
Everything is possible.

Please Log in or Create an account to join the conversation.

Time to create page: 0.044 seconds

BreezingForms Pro 1.4.7 for WordPress Released!

Available in the membership section.

September Discount!

Massive discounts on all subscriptions!

Get Your Subscription Here

Quick Links

Downloads

BreezingForms

ContentBuilder

BreezingCommerce

Templates

Documentation

BreezingForms

ContentBuilder

BreezingCommerce

Apprendre BreezingForms (French Community)

Apprendre et maîtriser BreezingForms par des tutoriels et exemples, le tout en français

breezingforms.eddy-vh.com

Questions et réponses sur les forums de l'AFUJ

AFUJ

Special Offer

Summer Sale! All subscriptions at a special price!

Includes prio support, all of our current and future Joomla!® extensions and Joomla!® templates for the duration of your membership.

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!