html2canvas实现截图功能遇到的坑。

应用版本：

"html2canvas": "^1.0.0-rc.3",

要实现后的样子

刚开始不知道会有那么多坑等着我。我慢慢的说来

1.首先要构建弹出框和按钮图标等，引入svg图标时就遇到了坑，我另一篇博客有写。跨过了图标坑之后就是重点了。

按常规思考，先去看了下html2canvas文档，发现，api很少，没问题，测试一下没问题。直接引入上手。

实施方案：首先生成二维码。排版dom,然后就生成cavans,然后再生成图片，然后再放a标签里，下载下来。一切完美。

2.找到这个

qrcodejs2

生成了二维码，并成功显示在页面了。

html2canvas在生成图片的时候，发现我上边图片不显示，下边有一段文字也不显示。就显示了二维码和主题。

我一看控制台说跨域。我没发起跨域请求啊。。这个时候百度一下，才知道这个知识点

canvas.getContext("2d").drawImage(Img,0,0,width,height);

这个drawImage方法里的这个Img的src必须是本地的或者说base64的，这样就能截图了，或者你设置跨域，后台代码改一下也跨域。

给 img 元素设置 crossOrigin 属性，值为 anonymous
图片服务端设置允许跨域（返回 CORS 头）

可是有的时候这个图片的链接多出用的，不能瞎改，或者说，本着能不麻烦人家就不麻烦人家的原则。转成base64吧，可是经过一圈发现，前端转成base64避不开我上边提到的那个方法。。so...原来的接口不能改，那就让后台帮我转个base64吧，没有别的办法了。方案总觉得不合理，但是没有办法的时候就是好办法。

后台给我提供了一个服务器图片转base64的接口。这样子我就图片变成base64了，就可以安心继续开发了，但是，那串文字不显示又是什么鬼呢。。我去看了下cavans的文档，发现说是有一些css代码是不支持的，那么多，我也不能挨个去对比啊，那我就比较一下上一行和下一行的代码有啥不同。我发现了这一行代码不同

重点：原来做个这样的需求吧，就是文字要显示三行，三行之后变成省略号...

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

问题就出在这里，因为这个盒模型，cavans可不认识，我给他改成block是一下。。。没毛病。果然是这个问题。

但是改了block可就实现不了三行限制了。。这只能折中了。。舍弃这个功能了。变成单行省略吧。

3.这次终于能放心的把图截下来了。

这截下来之后麻烦事又来了，要么转成的base64要么转成的是blob.想要保存到本地，想法是好的，然后就是这段代码。

复制自网上，这段代码很好找的。


function dataURLtoBlob(dataurl) {var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });
}function downloadFile(url,name='What\'s the fuvk'){var a = document.createElement("a")a.setAttribute("href",url)a.setAttribute("download",name)a.setAttribute("target","_blank")let clickEvent = document.createEvent("MouseEvents");clickEvent.initEvent("click", true, true);  a.dispatchEvent(clickEvent);
}function downloadFileByBase64(base64,name){var myBlob = dataURLtoBlob(base64)var myUrl = URL.createObjectURL(myBlob)downloadFile(myUrl,name)
}downloadFileByBase64('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAACXBIWXMAAAsSAAALEgHS3X78AAAEk0lEQVRYhbVXS09bRxQ+N3bNRdjEai3UYiGMYdFFUKzykKoKSpWN1QU1YtVVCavu4vML4vQPDFGURRYosIGtQxeVF8hG2cGiICMUVUh1awlSQaldVLBsB1fncsaM773Dq80nWXPndeabOd85MzYajQbcBogYBIAYAGwKIUq3MsK442i5BhBxDgD+AoAslVy/NW58Eog4AwAvHR0AD4UQC47Wa+A2J5HgcgsA+rgkzDhGvkcSQeWbtLDpGHFDeHXDWXi06wiLL81dVH4JAPcBoAAAd7k9p8yd4XnUn75KuK6aYAI5XkhiSwgR437y/XdK3yshREI3DwAmLiOic8ecYmiNy/uImKQPIQTt9AW3vyAC/D3jNo/taaEjEZGHIoSYoJ1yPaGMeWsr1f5XPA9t9lyh1YTcGSKS8B5wvQAXPo+xMGNcT3M/6eUBIk5cN2J0JBYU8WWV9k8RkRbqVdq+4R8d+R63+W3zLnWHqzB5t+T/FKv/TwD4SOn+jQ1v8okkmLSEHF8mG0KI65FARGnMEVas+t8BIAAAiyxMB+lwOCympqagv79fJZtExJwS7mS7JbdYJFxCrsxhtQkXd8UjGYqOrZwjUq1Wf/H5fB/YO1ZWVirZbNZUmlo24imXyyQgoTCnXdOEzzOZzJtMJkPsvweAjwHg23g8/ta+CGPO4/F85mglAfX2eldXV1X7sUwmsxWPx98AhyiRAE4q5JKHPFeKMitj336MNsRkdWNjA5aXl5u9pmnC+Pj4cx4j75rm+DscZsD+iiik6pxw1vhbakOHZpZcWlqC9fV1KBQKFdl2cHAQ54UdOcPL8S2j4Gel77kQIsmL51j9CQ5fiQm7QRV+v/8PGc5dXV39tVrNCtu9vb2/T05Omna8QogCJ5a0Ev9PJQGGzBspRCR1R2zjr0Qi0aLnTk5kKXkS0teOY+KwDXI+KNKiHR0drxuNRq9hGIGrFq7X6z5H4wUeczpYcM2Y7Pu0LQERDoeHh+8ZhtFs2NnZqRaLRdfFstnsJ6FQqNLW1nZgGMaZaZrekZGRsDIkpSVBCUYhUFbeDD8NDQ19AQBRqmxvb8P8/LwrAQKJk8O9R7bt7+9XJicnZc6w3KkjIQW3yIReA8A98mVPT8+PnLhgYGAABgcH4fT0tGXy7u6uVYbDYWhvb2/pGxsbO2FicoNaEhJSE++4XmI3WSQo/mdnZx2TEM9v8Onp6WpfX5/9pD5Uvq3Xmu49IZ9qFPu/KjmAoiRXq9WWHTNccHZ2pnUVJy0rAl1PQgiRYnE+UpqfCCFyiEhR9DW5YXR01DpuwzDq0WjU1ZZtUZkYc3wLl7QkmAjdfimXf1nE/m4+n4d8Pr/IFx/lG4eNzs7OoiLKpPoYVqElwURKLhNlzn/CJ0ax/rhardZ9Pp9ljwR5dHQEgUDA7zDqgktJaCCfcEkmYPn18PCw1N3dHYJzYZ4eHx//Y5pmSDFRcDenF+ZlmFNyx0uZQyqVyjM5x+PxtAeDQZXA2v9Kgq9z+QJf4/KraDT6A905jgnngtQ9hCxo35j/AfKZSLDuhqtsvQ8SNwMA/AsjMqbmUsz4jAAAAABJRU5ErkJggg==')

谷歌浏览器调试，不错不错，解决了。。可是。。到了手机上就扯淡了。完全没效果。。连个水花都没有。。。

咋办涅。。。还好是混合开发，我不行，原生app可以实现。我把base64传给它们，它们来下载到本地吧。

引入

<script src="https://cdn.jsdelivr.net/npm/dsbridge/dist/dsbridge.js"> </script>

ios和andriod都可以部署进去。，下载相应SDK。

我只需要调取相应的方法就可以了。

export function saveImage(data) {// "{\"imageData\":\"base64Image\"}"return new Promise((resolve, reject) => {// eslint-disable-next-line  下边是关键代码dsBridge.call("saveImage",data, function (v) {const { code } = JSON.parse(v);if (code === 1) {resolve();} else {reject();}});});
}

成功过关。

做了好多无用功，但是在技术未成熟或者说坑踩的少的时候这种学费是要交的。

有不同观点可以指出。谢谢。

html2canvas实现截图功能遇到的坑。相关推荐

JS 使用html2canvas实现截图功能的问题记录和解决方案
JS 使用html2canvas实现截图功能的问题记录和解决方案参考文章: (1)JS 使用html2canvas实现截图功能的问题记录和解决方案 (2)https://www.cnblogs.co ...
使用html2Canvas实现截图功能
通过JS就能截屏,这是Html2canvas为用户提供的一个便捷的神器,通过对DOM元素的信息提取渲染使用例子 : html2canvas($("#bg"), {onrender ...
vue + html2canvas + ArcGIS 3.x 地图一键截图功能踩坑之路(一)
坑有点多,层出不穷.好在还是基本做出来了... 地图情况:用了position:fixed定位,地图上还有各种自己画的线段.点.多边形区域. 功能目标:一键截图,能把地图区域的内容直接截取出来. 1. ...
html2canvas实现页面截图功能
一, 首先必不可少的引入:html2canvas.js 二, HTML 与 JS 代码 <div id="targetDom" class="main"& ...
html2canvas 在qq保存失败_QQ的截图功能，没想到这么好用！
文/安哥拉 Hello大家好,这里是工具狂人. 自从微信崛起后,很多人的社交阵地可能都从QQ转移到了微信. 但微信现存的一些不足,也让一些人开始怀念起了QQ. 相比微信,QQ好用的地方体现在,传输文件 ...
19 html2canvas实现ArcGIS API for JavaScript 4.X截图功能
需求描述在我们项目开发过程中,有时候需要将地图上面绘制的元素或添加的一些图标之类的小元素进行截图保存或者展示,这时候就需要我们实现关于地图的截图功能.目前在ArcGIS API for JavaSc ...
小程序跳转H5实现长截图功能；vue-cli3通过rem适配
一.需求: 微信小程序部分页面需要一键长图的功能. 通过html2canvas插件可以实现,具体可参考微信小程序实现一键长图并保存图片到相册.由于该插件只能在H5项目中使用,则需要截图的小程序 ...
前端js代码实现截图功能
前端js代码实现截图功能据我所知,屏幕截图大致可以分为两种类型. 一种是真-屏幕截图,也就是我们平常QQ,微信,钉钉等社交工具里面所用到的截图.也就是说它能把我们看到的东西截取下来,所见即所得. 另 ...
前端如何实现一键截图功能?
精彩回顾有点意思的gif动图生成平台开发实战(二) 如何实现H5可视化编辑器的实时预览和真机扫码预览功能在线IDE开发入门之从零实现一个在线代码编辑器基于React+Koa实现一个h5页面可视化 ...

html2canvas实现截图功能遇到的坑。

html2canvas实现截图功能遇到的坑。相关推荐

最新文章

热门文章