My main problem is, that i can not send the svg text to the resource. Doing so
by request parameters is not an option because the firewall will deny that long
cryptic content.
Therefor i would like to send the svg content through a form.
So far i have the following:
In my page-markup (containing the svg) i have
var getSvg = function(element) {
var svgHtml = document.querySelector('#chart-container
.highcharts-container').innerHTML;
element.querySelector('input[name="data"]').value = svgHtml;
}
In my page i have
add(
new WebMarkupContainer("svgForm")
.add(AttributeModifier.replace("action",
PngResourceReference.url().toString(;
I've registered a resource by reference
app.mountResource("/svg2png", new PngResourceReference());
---
public class PngResourceReference extends ResourceReference {
private static final Key KEY = new
Key(PngResourceReference.class.getName(), "svg-to-png", null, null, null);
public PngResourceReference() {
super(KEY);
}
@Override
public IResource getResource() {
return new PngResource();
}
public static CharSequence url() {
PageParameters svgParameters = new PageParameters();
return
RequestCycle.get().urlFor(Application.get().getResourceReferenceRegistry().getResourceReference(KEY,
false, false), svgParameters);
}
}
public class PngResource extends ByteArrayResource {
public PngResource() {
super("image/png");
}
@Override
protected void configureResponse(ResourceResponse response, Attributes
attributes) {
super.configureResponse(response, attributes);
response.setContentDisposition(ContentDisposition.ATTACHMENT);
response.setFileName("chart.png");
response.disableCaching();
}
@Override
protected byte[] getData(Attributes attributes) {
ByteArrayOutputStream os;
try {
PNGTranscoder t = new PNGTranscoder();
// Set the transcoder input and output.
String svg = "something";
TranscoderInput input = new TranscoderInput(new
StringReader(svg));
os = new ByteArrayOutputStream();
TranscoderOutput output = new TranscoderOutput(os);
// Perform the transcoding.
t.transcode(input, output);
os.close();
} catch (TranscoderException | IOException e) {
throw new RuntimeException(e);
}
return os.toByteArray();
}
}
> Gesendet: Montag, 17. Juli 2017 um 15:30 Uhr
> Von: "Martin Grigorov"
> An: "users@wicket.apache.org"
> Betreff: Re: Re: Use Resource to transfer SVG to PNG
>
> On Mon, Jul 17, 2017 at 3:13 PM, Per Newgro wrote:
>
> > Thanks for your response Martin.
> >
> > I tried to make it work the whole day now. But i can not get it to work
> > with IE11.
> > There is always a security error. This is a known problem for IE and
> > canvas.
> >
> > I ended up:
> >
> > $("#chart-export").on("click", function() {
> > var svg = document.querySelector( "svg" );
> > var svgData = new XMLSerializer().serializeToString( svg );
> >
> > var canvas = document.createElement( "canvas" );
> > document.body.appendChild(canvas);
> > var svgSize = svg.getBoundingClientRect();
> > canvas.width = svgSize.width;
> > canvas.height = svgSize.height;
> >
> > var ctx = canvas.getContext( "2d" );
> > ctx.clearRect(0, 0, canvas.width, canvas.height);
> >
> > var img = document.createElement("img");
> > img.setAttribute("crossOrigin", "anonymous");
> > img.onload = function() {
> > ctx.drawImage( img, 0, 0 );
> > var a = document.createElement("a");
> > a.download = "chart.png";
> > a.href = canvas.toDataURL( "image/png" );
> > document.body.appendChild(a);
> > a.click();
> > };
> > img.setAttribute("src", "data:image/svg+xml;base64," +
> > btoa(unescape(encodeURIComponent(svgData)))
> > );
> > });
> >
> > So i need to go on the other way. But there my problems still occur.
> >
>
> What exactly are the problems ?
> It is not very clear from your first email.
>
>
> >
> > Regards
> > Per
> >
> > > Gesendet: Montag, 17. Juli 2017 um 10:42 Uhr
> > > Von: "Martin Grigorov"
> > > An: "users@wicket.apache.org"
> > > Betreff: Re: Use Resource to transfer SVG to PNG
> > >
> > > Hi,
> > >
> > > Wouldn't HTML Canvas API be better solution?
> > > See https://stackoverflow.com/a/27232525/497381
> > >
> > >
> > > Martin Grigorov
> > > Wicket Training and
