使用html2canvas将h5页面转换成图片保存至本地 |
您所在的位置：网站首页 › 框架网页怎么保存图片到手机 › 使用html2canvas将h5页面转换成图片保存至本地 |
|
需求：用户点击保存按钮，将页面保存到本地。 这里使用html2canvas插件库，具体用法如下： （1）安装依赖包： //npm方式 npm install --save html2canvas //yarn方式 yarn add html2canvas(2)引入并使用 import html2canvas from "html2canvas" //html层 这里是需要保存成图片的内容 saveToImg() } > 保存图片 //js层 function saveToImg() { //点击保存按钮的回调事件 const element: HTMLElement = document.getElementById('canvasImg') as HTMLElement; // 需要导出的页面 html2canvas(element, { allowTaint: true, useCORS: true, }).then((canvas) => { // imgUrl 是图片的 base64格式 代码 png 格式 const imgUrl = canvas.toDataURL('image/png'); //下载图片的功能。 downloadIamge(imgUrl, "plantCardImg.png") }); } function downloadIamge(imgsrc:string, name:string) { //下载图片地址和图片名 const image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute("crossOrigin", "anonymous"); image.onload = function () { let canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; const context = canvas.getContext("2d"); context.drawImage(image, 0, 0, image.width, image.height); const url = canvas.toDataURL("image/png"); //得到图片的base64编码数据 const a = document.createElement("a"); // 生成一个a元素 const event = new MouseEvent("click"); // 创建一个单击事件 a.download = name || "photo"; // 设置图片名称 a.href = url; // 将生成的URL设置为a.href属性 a.dispatchEvent(event); // 触发a的单击事件 }; image.src = imgsrc; }注意：以上方式仅支持在纯h5页面实现下载。如果是APP内嵌h5页面进行下载的话，请查看以下解决方法： App中内嵌h5页面 无法实现下载功能
|
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |