willowsystems / jSignature

jQuery plugin - draw signature in browser.
720 stars 266 forks source link

Can I convert base64 image string into base30 #98

Open dnsahoo opened 5 years ago

dnsahoo commented 5 years ago

Hi,

I have a base64 image string (for example: data:image/png;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ.........)

and want to convert into base30 format (data:image/jsignature;base30,9MZ455566565546564464464.....).

I have tried following code:

var sigdiv = $("#signaturex").jSignature({'UndoButton':true, 'width': 400, 'height': 100}); var sourceCanvas = 'data:image/png;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ.........'; var canvas = document.getElementsByClassName("jSignature"); var ctx = canvas[0].getContext("2d"); ctx.drawImage(sourceCanvas, 0, 0); var data = sigdiv.jSignature('getData', "base30"); console.log(data);

Please suggest.

kamalsivalingam commented 1 year ago

@dnsahoo Were you able to convert Base64 to Base30? I am running into a similar issue

guylap commented 1 year ago

How about if you convert to image directly from Base 64 with this...

public BufferedImage converToImageFromBase64(String dbBase64) { BufferedImage image = new BufferedImage(550, 170, BufferedImage.TYPE_INT_ARGB); byte[] imageByte = Base64.getDecoder().decode(dbBase64); try (ByteArrayInputStream bis = new ByteArrayInputStream(imageByte)) { image = ImageIO.read(bis); } catch (IOException ex) { Logger.getLogger(JSigBase30Converter.class.getName()).log(Level.SEVERE, null, ex); System.out.println("Error in JSigBase30Converter class " + ex.getMessage()); } Graphics2D ig2 = image.createGraphics(); RenderingHints rh = new RenderingHints(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); ig2.setRenderingHints(rh); ig2.setColor(Color.gray); ig2.setStroke(new BasicStroke(1)); ig2.drawLine(50, 135, 500, 135); ig2.setColor(new Color(0, 0, 139)); ig2.setStroke(new BasicStroke(3, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND)); ig2.dispose(); return image; }

kamalsivalingam commented 1 year ago

hmm...Thanks for this suggestion. I would need to call an API that takes in Base30. Could you please suggest how to convert BufferedImage to Base30? Thanks for your time and the help!

guylap commented 1 year ago

How about this...

public BufferedImage converToImage(String dbBase30) { BufferedImage bi = new BufferedImage(550, 170, BufferedImage.TYPE_INT_ARGB); Graphics2D ig2 = bi.createGraphics(); RenderingHints rh = new RenderingHints(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); ig2.setRenderingHints(rh); ig2.setColor(Color.gray); ig2.setStroke(new BasicStroke(1)); ig2.drawLine(50, 135, 500, 135); ig2.setColor(new Color(0, 0, 139)); ig2.setStroke(new BasicStroke(3, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND)); JSigBase30Converter sig = new JSigBase30Converter(); ArrayList<int[][]> sigStrokeXY = sig.Base30ToNativeArray(dbBase30); for (int[][] ssXY : sigStrokeXY) { ig2.drawPolyline(ssXY[0], ssXY[1], ssXY[0].length); } ig2.dispose(); return bi; }

guylap commented 1 year ago

Sorry that is all I got since this is something I programmed about 8 years ago....

kamalsivalingam commented 1 year ago

Thanks I will take a look to see how i can tweak. The end result i need is Base30. So Base64->BufferedImage->Base30

kamalsivalingam commented 1 year ago

Appreciate your time and effort!

guylap commented 1 year ago

👍