Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "canvas in html how to save the high-definition picture of div", the content is detailed, the steps are clear, the details are handled properly, I hope that this article "how to save the high-definition picture of div in html" article can help you solve your doubts, following the editor's ideas slowly in-depth, let's learn new knowledge.

1. Select the html2canvas version (this version can be magnified to ensure a clear picture)

The default generated canvas image is blurred on the retina device. Processing it into a 2x image can solve this problem:

Varw=$ ("# code") .width ()

Varh=$ ("# code") .height ()

/ / set the width and height of the canvas to 2 times the width and height of the container

Varcanvas=document.createElement ("canvas")

Canvas.width=w*2

Canvas.height=h*2

Canvas.style.width=w+ "px"

Canvas.style.height=h+ "px"

Varcontext=canvas.getContext ("2d")

/ / then zoom the canvas and draw the image twice as large on the canvas

Context.scale (2Jing 2)

Html2canvas (document.querySelector ("# code"), {

Canvas:canvas

Onrendered:function (canvas) {

...

}

})

Download method:

.on ('click','.download',function () {)

('# mycanvas'). Remove ()

Var_height=$ ('.skinReport') .height ()

/ / roll to the top

('html,body') .animate ({scrollTop:0})

If (confirm ('download skin test report?')

{

SetTimeout (function () {

Varcanvas=document.createElement ("canvas")

Wicked $('# skinReport') .width ()

Hobby $('# skinReport') .height ()

Canvas.width=w*2

Canvas.height=h*2

Canvas.style.width=w+ "px"

Canvas.style.height=h+ "px"

Varcontext=canvas.getContext ("2d")

/ / then zoom the canvas and draw the image twice as large on the canvas

Context.scale (2Jing 2)

Html2canvas (document.getElementById ('skinReport'), {

AllowTaint:false

TaintTest:true

Canvas:canvas

Onrendered:function (canvas) {

Canvas.id= "mycanvas"

Canvas.style.display='none'

Document.body.appendChild (canvas)

/ / generate base64 image data

ImgData=canvas.toDataURL (type)

/ / varnewImg=document.createElement ("img")

/ / newImg.src=dataUrl

/ / document.body.appendChild (newImg)

/ / console.log (imgData)

Var_fixType=function (type) {

Type=type.toLowerCase () replace (/ jpg/i,'jpeg')

Varr=type.match (/ png | jpeg | bmp | gif/) [0]

Return'image/'+r

}

/ / process imagedata and replace mimetype

ImgData=imgData.replace (_ fixType (type), 'image/octet-stream')

/ * *

* save files locally

* @ param {String} data the picture data to be saved locally

* @ param {String} filename filename

* /

VarsaveFile=function (data,filename) {

Varsave_link=document.createElementNS ('http://www.w3.org/1999/xhtml','a');

Save_link.href=data

Save_link.download=filename

Varevent=document.createEvent ('MouseEvents')

Event.initMouseEvent ('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null)

Save_link.dispatchEvent (event)

}

/ / the name of the downloaded question

Varfilename=aname+' skin test report'+ (newDate ()). GetTime () +'. + type

/ / download

SaveFile (imgData,filename)

}

Width:1512

Height:15000

})

}, 2500)

}

Else

{

Return

}

})

Read this, the "canvas in html how to save div high-definition picture" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more related articles, welcome to pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.