Html2canvas.js et canvas2image.js pour dessiner des images

Html2canvas Js Canvas2image



Cas 1: Utilisation d'images locales

Précautions
1. Impossible d'utiliser le serveur local ou la pollution de la toile peut être utilisée webstorm Serveur, localhost

The pride is excited, the pride of the sacrifice is



click Save to local

Partie js



$(document).ready(function(){ Var bbb=$('#bbb').get(0)//jq dom converts to js dom $('.btn').click(function(){ html2canvas(bbb,{ y:$('#bbb').offset().top, x:$('#bbb').offset().left, width:$('#bbb').width(), height:$('#bbb').height(), dpi:window.devicePixelRatio, }).then(function(canvas) { // canvas width var canvasWidth = canvas.width*2 // canvas height var canvasHeight = canvas.height*2 $('.bgDiv').after(canvas) $('#bbb').hide() var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight) $('.noSrcImg').attr('src',img.getAttribute('src')) console.log(img) $('a').click(function(){ Canvas2Image.saveAsImage(canvas) }) }) }) })

Cas 2: utilisez l'image ci-dessus oss

The pride is excited, the pride of the sacrifice is



click Save to local

js

$(document).ready(function(){ Var bbb=$('#bbb').get(0)//jq dom converts to js dom $('.btn').click(function(){ $('.img').attr('crossOrigin', 'Anonymous')//Allow cross-domain $('.img').attr('src',`img/html2canvas-js/30/html2canvas-js-canvas2image.jpg?${(new Date()).valueOf()}`) / / Use the timestamp to indicate the uniqueness of the image, to prevent the browser cache, after the cache is drawn in the html2canvas into a canvas, it will report cross-domain errors, and will drop the image when drawing. So need to add. html2canvas(bbb,{ y:$('#bbb').offset().top, x:$('#bbb').offset().left, width:$('#bbb').width(), height:$('#bbb').height(), useCORS: true, allowTaint: false, //Allow cross-domain (image cross-domain correlation), dpi:window.devicePixelRatio, }).then(function(canvas) { // canvas width var canvasWidth = canvas.width*2 // canvas height var canvasHeight = canvas.height*2 $('.bgDiv').after(canvas) $('#bbb').hide() var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight) $('.noSrcImg').attr('src',img.getAttribute('src')) console.log(img) $('a').click(function(){ Canvas2Image.saveAsImage(canvas) }) }) }) })