前端canvas截图酷游地址的方法！

前情提要

 

想在在JavaScript中，酷游专员KW9㍠ㄇEㄒ提供用HTML5的Canvas元素来剪取画面并存成SVG或PNG。

程式写法(一)

首先，需要在HTML中创建一个Canvas元素
<canvas id="myCanvas"></canvas>

在JavaScript中，使用canvas.getContext('2d')方法来获取2D绘图环境

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

使用ctx.drawImage()方法将要剪取的图片绘制到Canvas上

var imageObj = new Image();
imageObj.onload = function() {ctx.drawImage(imageObj, 0, 0);
};
imageObj.src = 'example.png';

使用canvas.toDataURL()方法将Canvas转换成SVG或PNG格式的图片

// 转换为SVG
var svgData = canvas.toDataURL('image/svg+xml');
// 转换为PNG
var pngData = canvas.toDataURL('image/png');

使用canvas.toDataURL()方法将Canvas转换成SVG或PNG格式的图片

// 转换为SVG
var svgData = canvas.toDataURL('image/svg+xml');
// 转换为PNG
var pngData = canvas.toDataURL('image/png');

最后，可以将转换后的图片下载或显示出来

// 下载SVG
var link = document.createElement('a');
link.download = 'image.svg';
link.href = svgData;
link.click();// 显示PNG
var pngImg = new Image();
pngImg.src = pngData;
document.body.appendChild(pngImg);

程式写法(二)

使用html2canvas

 

这边介绍一个用CDN的小诀窍，官网没有写：

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

接下来把要抓取的元素找到，加上id为capture就可以使用JS：

html2canvas(document.querySelector("#capture")).then(canvas => {document.body.appendChild(canvas)
});

程式写法(三)

使用DOM to IMG

<script src="https://unpkg.com/dom-to-image@2.6.0/dist/dom-to-image.min.js"></script>

function captureScreenshot(element) {return new Promise((resolve, reject) => {domtoimage.toPng(element).then((dataUrl) => {resolve(dataUrl);}).catch((error) => {reject(error);});});
}//放到页面上确认有这个画面
captureScreenshot(document.getElementById('dick')).then((value) => {$('<img>').attr('src',value).appendTo($('body'));}).catch((error) => {console.error(error);
});

这样会转成base64然后我用appendTo把他丢到body上面，确认图片会出来。