vue将页面(dom元素)转换成图片,并保存到本地
1 npm install html2canvas --save
<template>
<div class="QRCode-box">
<img id="imageWrapper" class="QRCode" src="@/assets/shun.png" alt="" />
<button color="#29c37f" type="info" @click="toSave"
>保存二维码到手机</button
>
</div>
</template> <script lang="ts">
import { defineComponent, onMounted, reactive, ref } from "vue";
import html2canvas from 'html2canvas'
export default defineComponent({
setup() {
const state = reactive<InitData1>({}); const toSave = () => {
const candom: any = document.getElementById("imageWrapper")
html2canvas(candom).then((canvas) => {
let saveUrl = canvas.toDataURL("image/png"); //将图片元素转成base64图片
console.log(saveUrl)
let aLink = document.createElement("a");
let blob = base64ToBlob(saveUrl); //将base64转成blob流
console.log(blob)
let evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true);
aLink.download = "二维码.jpg";
aLink.href = URL.createObjectURL(blob); //转成下载链接
aLink.click();
console.log(aLink.href);
if (aLink.href) {
alert('保存成功')
}
});
}; return {
toSave,
};
},
});
// 这里把图片转base64
function base64ToBlob(code: any) {
let parts = code.split(";base64,");
let contentType = parts[0].split(":")[1];
let raw = window.atob(parts[1]);
let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
}
</script>
vue将页面(dom元素)转换成图片,并保存到本地的更多相关文章
- 将HTML元素转换成图片供用户下载(html2canvas + canvas2Image)
这是项目中遇到的一个问题,起初觉得把一个html元素生成图片,提供给用户下载的需求挺容易实现的,毕竟看过一些截图的插件,但是在真正操作中遇到了各种各样的问题,比如移动端上截图显示不清晰,html元素中 ...
- js实现字符串切割并转换成对象格式保存到本地
// split() 将字符串按照指定的规则分割成字符串数组,并返回此数组(字符串转数组的方法) //分割字符串 var bStr = "www.baidu.con"; var a ...
- PHP将base64数据流转换成图片并保存
Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法.可查看RFC2045-RFC2049,上面有MIME的详细规范. Ba ...
- 使用的是html5的canvas将文字转换成图片
当前功能的运用场景是:用户需要传文件给他人,在用户选择文件之后需要显示一个文件图标和所选文件的名称. 当前代码部分是摘自网上,但是已经忘记在什么地方获取的,如有侵权联系小弟后自当删除. 注意:必须在h ...
- C#技术分享【PDF转换成图片——13种方案】(2013-07-25重新整理)
原文:C#技术分享[PDF转换成图片--13种方案](2013-07-25重新整理) 重要说明:本博已迁移到 石佳劼的博客,有疑问请到 文章新地址 留言!!! 写在最前面:为了节约大家时间,撸主把最常 ...
- 使用float和display:block将内联元素转换成块元素的不同点
使用float和display:block将内联元素转换成块元素的不同点 使用float和display:block将内联元素转换成块元素的不同点:内联元素可以转换成块级元素,常用的方法比如可以为内联 ...
- C#技术分享【PDF转换成图片——11种方案】
1.[iTextSharp.dll],C# 开源PDF处理工具,可以任意操作PDF,并可以提取PDF中的文字和图片,但不能直接将PDF转换成图片. DLL和源码 下载地址:http://downloa ...
- 批量将网页转换成图片或PDF文档技巧分享
工作中我们有时要将一些批量的网页转换成图片或者PDF文档格式,尽管多数浏览器具有滚动截屏或者打印输出PDF文档功能.可是假设有几十上百张网页须要处理,那也是要人命的.所以我一直想找一款可以批量处理该工 ...
- WPF中实现图片文件转换成Visual对象,Viewport3D对象转换成图片
原文:WPF中实现图片文件转换成Visual对象,Viewport3D对象转换成图片 1.图片文件转换成Visual对象 private Visual CreateVisual(string imag ...
- Gson字符串编码,字符串转换成图片保存,二进制转换成图片保存
import java.io.BufferedInputStream; import java.io.ByteArrayInputStream; import java.io.File; import ...
随机推荐
- 磊磊零基础打卡算法:day16 c++ Trie树
5.19 Trie树: 用处:快速的查找和高效存储字符串集合的数据结构. 类似如此的查找,存储 其简单的两个操作:插入和删除 插入: void insert(char str[]) { int p; ...
- MATLAB画图自动确定坐标范围(GUI)
今天在用MATLAB做我的毕设的时候碰到一个很纠结的问题,之所以说纠结是因为我觉得这个问题很简单,可是一时半会就是弄不出来(ー`´ー).鼓捣了半个小时左右吧,终于搞出来了.下面做个纪念: 问题描述 在 ...
- CentOS基本命令手册
一.磁盘使用情况 两个命令df .du结合比较直观 df -h #查看整台服务器的硬盘使用情况 du -sh * #查看每个文件夹的大小 二.tar 用法 压缩 tar tar -czvf test. ...
- 关于Maven的使用
Maven基础入门 一.maven是什么 Apache Maven,是一个项目管理及自动构建的工具,有Apache软件基金会所提供. Maven是用Java语言编写的,是一款可以跨平台的软件. Mav ...
- 用javassist和CGLIB 解决JDK动态代理的缺陷
用 javassist 解决 JDK 动态代理的缺陷 JDK动态代理的缺陷 要求目标类必须实现接口,否则产生不了代理.有些场景下,目标类也要产生代理类但是木有实现接口,这个时间 Java 中有两个常 ...
- Apache Ranger系列九:修改源码支持URI类型为s3的操作
问题描述:ranger在checkPrivileges(org.apache.ranger.authorization.hive.authorizer.RangerHiveAuthorizer)时,当 ...
- SQL语句用法总结
use quan56_goods; 使用数据库 show tables; 展示数据表 模糊查询 select * from tb_brand where name like '%林%'; 顺序 书写顺 ...
- Spring--AOP简介+入门案例
AOP简介 面向切面编程:在不惊动原始设计的基础上,进行功能增强 各个要应用该功能的对象叫做连接点,那个功能叫做通知,表面上的代码没有发生变化,私下里发生变化的连接点,会出现切入点,切入点与通知通过切 ...
- ROS节点开机自启的方法
ROS节点开机自启的方法(Ubuntu- melodic) 一. 使用命令 sudo apt install ros-melodic-robot-upstart 安装 robot-upstart工具包 ...
- webgl 系列 —— 渐变三角形
其他章节请看: webgl 系列 渐变三角形 本文通过一个渐变三角形的示例逐步分析:varying变量.合并缓冲区.图形装配.光栅化.varying 内插 绘制三个点v1 需求:绘制三个相同颜色的点, ...