絵を描くためのHtml2canvas.jsとcanvas2image.js

Html2canvas Js Canvas2image

ケース1：ローカル画像を使用する

予防
1.ローカルサーバーを使用できない、またはキャンバスの汚染を使用できますwebstormサーバー、localhost

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(){ 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) }) }) }) })

ケース2：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) }) }) }) })