High quality image using Zoom

[vizlipuzli]

I would like generate high quality image from DOM element. I tried to scale up element using css "zoom" by without success ;( zoom is not implemented?

[enjoytheday]

https://jsfiddle.net/enjoythedaycsk/9L966sdd/1/

I tried to achieve high resolution thing in this example but didn't get that...

Click on download pngx2 button..

Is it possible to do operations on backend like when button is clicked canvas turns into twice its size and then pic is captured and then again canvas is taken back to regular size..

[luck2011]

I choose transform scale(2), not bad!
Wish html2canvas add an option(feature) like multiplier(zoom). 😃

[enjoytheday]

can you please share your code so that we can see what result are you getting exactly

[luck2011]

@enjoytheday I scaled the dom, so we should make sure the user cannot see this scale. But here we can't set the dom to display:none, otherwise html2canvas will not working! So I set zIndex of the positioned dom to -1, it works!

  myDom.style.transform = myDom.style.webkitTransform = 'scale(2)'
  myDom.style.transformOrigin = myDom.style.webkitTransformOrigin = '0 0'
  html2canvas(myDom, {
    width: myDom.offsetWidth * 2,
    height: myDom.offsetHeight * 2
  }).then(function(canvas) {
    var data = canvas.toDataURL()    // now img quality doubled!
  })

[enjoytheday]

@luck2011 can you please set this this in jsfiddle example?

https://jsfiddle.net/enjoythedaycsk/9L966sdd/1/

I tried but its not being set by me.

You can edit it completely or can create new one.

It will be helpful to many 💃