html2Canvas+JsPDF 导出pdf 无法显示网络图片

news2024/11/25 3:39:20

html2Canvas+JsPDF 导出pdf

问题:类似于下面着这种网络图片使用img导出的时候是空白的

https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics4.baidu.com%2Ffeed%2F7e3e6709c93d70cf827fb2fda054500cb8a12bc9.jpeg%40f_auto%3Ftoken%3Dd97d3f0fd06e680e592584f8c7a24ac8&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1690045200&t=e1a88c44b1b9907677400a079766e0bf

解决:将网络图片转成base64

<img :src="aaa" style="width:200px" alt="">

转base64
let res = await this.getBase64Image('https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics4.baidu.com%2Ffeed%2F7e3e6709c93d70cf827fb2fda054500cb8a12bc9.jpeg%40f_auto%3Ftoken%3Dd97d3f0fd06e680e592584f8c7a24ac8&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1690045200&t=e1a88c44b1b9907677400a079766e0bf')
this.aaa = res

getBase64Image(src) {
      return new Promise(resolve => {
        const img = new Image()
        img.crossOrigin = ''
        img.src = src
        img.onload = function() {
          const canvas = document.createElement('canvas')
          canvas.width = img.width
          canvas.height = img.height
          const ctx = canvas.getContext('2d')
          ctx && ctx.drawImage(img, 0, 0, img.width, img.height)
          const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
          const dataURL = canvas.toDataURL('image/' + ext)
          resolve(dataURL)
        }
      })
    },

在这里插入图片描述

导出
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/781088.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Devart UniDAC Crack

Devart UniDAC Crack 通用数据访问组件(UniDAC)是一个强大的非可视化跨数据库数据访问组件库&#xff0c;适用于Delphi、Delphi for.NET、CBuilder和Lazarus(Free Pascal)。我们将长期成功开发的经验结合到一个产品中&#xff0c;提供对流行数据库服务器的统一访问&#xff0c;…

Sublime Text 4 激活教程(Windows+Mac)

下载安装 官网 https://www.sublimetext.com 点击跳转 2023.7.21 版本为4143 Windows激活方式 一、激活License方式 入口在菜单栏中"Help” -> “Enter License” 注意格式&#xff0c;可能会过期失效&#xff0c;失效就用方式二 Mifeng User Single User License E…

SUSE宣布推出免费RHEL分叉以保留企业级Linux的选择权

导读在Red Hat宣布将限制AlmaLinuxOS或Rocky Linux等社区发行版对其公共仓库的访问后&#xff0c;最近Red Hat与IBM之间发生了一些争论&#xff0c;有鉴于此&#xff0c;SUSE今天宣布计划为RHEL和CentOS用户提供一个免费的替代方案。 SUSE已经开发了SUSE Linux Enterprise (SLE…

【数据挖掘】PCA/LDA/ICA:A成分分析算法比较

一、说明 在深入研究和比较算法之前&#xff0c;让我们独立回顾一下它们。请注意&#xff0c;本文的目的不是深入解释每种算法&#xff0c;而是比较它们的目标和结果。 如果您想了解更多关于PCA和ZCA之间的区别&#xff0c;请查看我之前基于numpy的帖子&#xff1a; PCA 美白与…

Fatdog64 Linux 814发布

导读Fatdog64 Linux是一个小型、桌面、64位的Linux发行版。 最初是作为Puppy Linux的衍生品&#xff0c;并增加了一些应用程序。该项目最新的版本&#xff0c;Fatdog64 814&#xff0c;是8xx系列的最后一个版本&#xff0c;未来的版本将转向9xx基础。 尽管它是该系列的最后一个…

红黑树概念

这里写目录标题 红黑树概念红黑树的性质红黑树节点的定义红黑树的插入 红黑树概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个结点上增加一个存储位表示结点的颜色&#xff0c;可以是Red或Black。 通过对任何一条从根到叶子的路径上各个结点着色方式的限制&…

Docker Compose 解析:定义和管理多容器应用,从多角度探索其优势和应用场景

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…

【代码随想录 | Leetcode | 第十天】哈希表 | 三数之和 | 四数之和

前言 欢迎来到小K的Leetcode|代码随想录|专题化专栏&#xff0c;今天将为大家带来哈希法~三数之和 | 四数之和的分享✨ 目录 前言15. 三数之和18. 四数之和总结 15. 三数之和 ✨题目链接点这里 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], num…

flask 页面新增文件,存在重复文件时,返回错误消息

(40条消息) flask 读取文件夹文件&#xff0c;展示在页面&#xff0c;可以通过勾选删除_U盘失踪了的博客-CSDN博客 项目结构 这是一个基本的Flask应用程序&#xff0c;主要有两个路由&#xff0c;一个是index&#xff0c;用于显示所有存在的文件以及用于删除已选的文件&#…

C# SolidWorks 二次开发 -从零开始创建一个插件(2)

上一篇我详细讲解了如何创建一个插件&#xff0c;但是无界面无按钮&#xff0c;这种插件适合配合事件偷偷的在后台做点什么事情。今天这篇讲一下如何增加一些按钮到工具栏、菜单上去。 先告诉大家这个东西注册表在哪&#xff0c;因为solidworks在这方面做的不太好&#xff0c;…

七大排序算法和计数排序

文章目录 一、直接插入排序二、希尔排序三、直接选择排序四、堆排序五、冒泡排序六、快速排序6.1递归实现快速排序6.2非递归实现快速排序 七、归并排序7.1递归实现归并排序7.2非递归实现归并排序 八、计数排序 以下排序以从小到大排序为例 一、直接插入排序 时间复杂度&#x…

如何从gitee上下载项目并把它在本地运行起来

有时候我们会想到在gitee上下载下来项目&#xff0c;那么怎么把项目下载到本地并跑起来呢&#xff1f; 第一步&#xff1a;在git上找到你想要克隆下来的项目&#xff0c;按照如下操作复制项目地址连接&#xff0c;如下图&#xff1a; 以上可以选择HTTPS和SSH两种形式。 第二步…

在SPringBoot中整合Mybatis-plus以及mybatis-puls的基本使用

创建SPringBoot项目 1.选择创建项目 2.创建SPringBoot项目 3.选择SPringBoot的版本和依赖 4.导入mysql,druid,mybatis-plus和lombok的依赖,导入后记得更新依赖 <dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId…

Mybatis单元测试,不使用spring

平时开发过程中需要对mybatis的Mapper类做单元测试&#xff0c;主要是验证语法是否正确&#xff0c;尤其是一些复杂的动态sql&#xff0c;一般项目都集成了spring或springboot&#xff0c;当项比较大时&#xff0c;每次单元测试启动相当慢&#xff0c;可能需要好几分钟&#xf…

Mac 四大常用清理软件推荐,软件特色下载教程横向评测

Mac 一般来说基本是不会中毒的&#xff0c;而且像 现在的 windows 也是很少中毒&#xff0c;但我们可能还是需要一款杀毒清理软件&#xff0c;主要是为了清理垃圾&#xff0c;统一查看并管理软件开机自启、权限信息等&#xff0c;统一卸载清理等功能&#xff0c;另外我们可能还…

【机器学习】PyTorch手动实现Logistic回归算法

参考地址&#xff1a;点击打开 计算较为繁琐&#xff0c;需要用到sigmoid函数和梯度下降算法&#xff0c;步骤主要如下&#xff1a; 二项分布概率公式表示最大似然估计和对数化计算求道带入梯度下降算法计算和优化 代码&#xff1a; import numpy as np import matplotlib.py…

05.计算机网络——TCP协议

文章目录 TCP协议段格式TCP交付过程TCP解包过程确认应答机制\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kDvQFCTM-1689855767485)(C:\Users\11794\AppData\Roaming\Typora\typora-user-images\image-20230719204622485.png)\] 32位序号/32位确认…

深度学习anaconda+pycharm+虚拟环境迁移

一、下载好anaconda和pycharm安装包。 下载anaconda:Index of /anaconda/archive/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror pycharm汉化包 二、安装anaconda 深度学习环境配置-Anaconda以及pytorch1.2.0的环境配置&#xff08;Bubbliiiing 深度学习 教程&…

Pycharm远程服务器连接教程

第一步 只有Pycharm专业版才能远程连接服务器 第二步&#xff1a;远程连接部分 点击左上角的号新建一个连接&#xff0c;起一个名字&#xff0c;比如叫dilab191&#xff1a; 设置SSH参数 Tools-Development-Options 第三步, 添加远程服务器解释器部分 File-settings-Project …

spring复习:(50)@Configuration注解配置的singleton的bean是什么时候被创建出来并缓存到容器的?

一、主类&#xff1a; 二、配置类&#xff1a; 三、singleton bean的创建流程 运行到context.refresh(); 进入refresh方法&#xff1a; 向下运行到红线位置时&#xff1a; 会实例化所有的singleton bean.进入finisheBeanFactoryInitialization方法&#xff1a; 向下拖动代…