【前端动手玩创意】前端canvas截图的招式！竟然有三招，可存成SVG或PNG (7)

目录

【前端动手玩创意】等待的转圈圈效果 (1)

【前端动手玩创意】google五星评分的星星(2)

【前端动手玩创意】CSS-3D卡片翻转效果(3) (今天难度颇高，想挑战再进来！)

【前端动手玩创意】一句CSS做出好看的hero section！(4)

【前端动手玩创意】创造一个Skill bar(5)

【前端动手玩创意】遮蔽广告(D卡未登入)脚本、自定义新增名单(6)

【前端动手玩创意】前端canvas截图的招式！竟然有三招，可存成SVG或PNG (7)

【前端动手玩创意】让你的PDF档案更难被抓取(8)

【前端动手玩创意】哇操！你敢信？花式写todo-list，body里面一行都没有也能搞？(9)

【前端动手玩创意】卡片製作，才不是！是卡片製作器！(10)

前情提要

想在在JavaScript中，用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格式的图片

// 转换为SVGvar svgData = canvas.toDataURL('image/svg+xml');// 转换为PNGvar pngData = canvas.toDataURL('image/png');

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

// 下载SVGvar link = document.createElement('a');link.download = 'image.svg';link.href = svgData;link.click();// 显示PNGvar 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上面，确认图片会出来。

心得

以上三招都是实用又简单的方法哦！(,,・ω・,,)
是不是没有料到有三招呢，
写前端不怕你没招，只怕你看了招数之后还不赶紧去尝试搞看看！
喜欢这系列记得追蹤、收藏唷！

未来会有更多有趣的API以及小项目的介绍呢！