使用html2canvas，由html转换canvas时，出现图片丢失问题解决方案
在img标签上加上crossorigin=“anonymous”；
如果是图片地址是跨域网址，请将图片转换为base64格式；
源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>html2canvas example</title>
</head>
<body>
<div id="view">
<input type="button" value="截图" onclick="takeScreenshot()" />
<img
src=""
alt=""
crossorigin="anonymous"
class="imgs"
/>
<canvas id="myCanvas"></canvas>
</div>
</body>
<script src="https://unpkg.com/html2canvas@1.0.0-rc.7/dist/html2canvas.js"></script>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 100);
function takeScreenshot() {
html2canvas(document.querySelector("#view")).then((canvas) => {
document.body.appendChild(canvas);
});
}
getBase64Image('https://profile.csdnimg.cn/B/1/0/3_qq_39045645',document.querySelector('.imgs'));
function getBase64Image(url, ref) {
var image = new Image();
image.src = url + "?v=" + Math.random(); // 处理缓存
image.crossOrigin = "*"; // 支持跨域图片
image.onload = function () {
var base64 = drawBase64Image(image);
ref.src = base64;
};
}
更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/119945845
使用html2canvas，由html转换canvas时，出现图片丢失问题解决方案的更多相关文章
- 前端使用html2canvas截图，在canvas上绘制图片及保存图片
1.使用html2canvas 存在的问题: 不同的机型绘制位置不同的问题. 这个主要因为Html动态设置了html的dpr.(dpr可以解决屏幕显示不了1pxborder和无法显示小于12px的文字 ...
- Long类型转json时前端js丢失精度解决方案
一.问题背景 Java后端开发过程中,尤其是id字段,因数值太大,通过json形式传输到前端后,在js解析时,会丢失精度. 如果对精度丢失没有什么概念,可以看一个知乎的帖子,来感受一下:https:/ ...
- html2canvas.js——HTML转Canvas工具
我们经常会遇上动态生成海报的需求,而在Web前端中,生成图片非Canvas莫属.但是在实际工作当中,为了追求效率,我们会不可避免地去使用一些JS插件,而html2canvas.js就是一款优秀的插件, ...
- PHP 将秒数转换成时分秒
将秒数转换成时分秒,PHP提供了一个函数gmstrftime,不过该函数仅限于24小时内的秒数转换.对于超过24小时的秒数,我们应该怎么让其显示出来呢,例如 34:02:02 $seconds = 3 ...
- PowerDesigner中转换物理模型时的命名转换
原文:PowerDesigner中转换物理模型时的命名转换 最近在使用PowerDesigner建模数据库,在使用中积累了一些遇到的问题和解决办法,记录下来,希望对遇到同样问题的朋友有所帮助. 早 期 ...
- <!--转换office时需要此配置 --> <identity impersonate="true" />
1.需要对Office 进行操作时 ,添加权限 <!--转换office时需要此配置 --> <identity impersonate="true" /> ...
- 在jQuery中使用canvas时遇到的问题
正常的情况下一般在JavaScript中使用canvas,会用到如下代码: var canvas=document.getElementById("canvas"); var co ...
- spring boot @ResponseBody转换JSON 时 Date 类型处理方法，Jackson和FastJson两种方式,springboot 2.0.9配置fastjson不生效官方解决办法
spring boot @ResponseBody转换JSON 时 Date 类型处理方法 ,这里一共有两种不同解析方式(Jackson和FastJson两种方式,springboot我用的1.x的版 ...
- 三：C#对象转换Json时的一些高级（特殊）设置；
导航目录: Newtonsoft.Json 概述 一:Newtonsoft.Json 支持序列化与反序列化的.net 对象类型: 二:C#对象.集合.DataTable与Json内容互转示例: ...
随机推荐
- typescript使用入门及react+ts实战
ts介绍 TypeScript是一种由微软开发的自由和开源的编程语言.它是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程. 与js关系 ts与js区 ...
- spring boot整合mybaties项目
1.第一步配置pom.xml 2.第二步 将我们所需要的ssm配置文件复制粘贴到src/main/resources下面: 3.将ssm中所需要的layui和jsp页面放到webapp下面 4.修改复 ...
- 2021.07.02 UVa1197 多路归并模板
2021.07.02 UVa1197 多路归并模板 UVA11997 K Smallest Sums - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 分析: 题解 UVA11997 ...
- STM8S103F3P6 开发环境笔记
STM8S103F3 产品手册 https://www.st.com/resource/en/datasheet/stm8s103f2.pdf 内核 16 MHz advanced STM8 core ...
- vmware安装或卸载时，显示无法打开注册表项
vmware卸载是出了名的臭名昭著,因为太难删干净了,删不干净又会有各种各样的问题.比如下文这个"无法打开注册表项" 这个我相信有很多人在重装vmware的时候遇到过,因此我来 ...
- 2022年最新Cloudflare免费自选IP教程(非Partner)
写在开头 众所周知,CF在去年底大规模禁用Host API key,使得Partner自选法失效.但最近,Cloudflare为所有计划添加了100个SaaS域免费额度(以前$2一个). 经过一番摸索 ...
- MongoDB排序时内存大小限制和创建索引的注意事项！
线上服务的MongoDB中有一个很大的表,我查询时使用了sort()根据某个字段进行排序,结果报了下面这个错误: [Error] Executor error during find command ...
- windows下载安装JDK8
一 .下载链接 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 根据自己的电脑安 ...
- OpenStack平台调度策略优化
OpenStack平台报错分析 在OpenStack平台经历大并发的时候,比如同一个平台,大量的用户同时创建云主机(单个用户创建大量云主机不会触发此种现象),会达到云平台的性能瓶颈,导致创建云主机报错 ...
- Spring 源码（12）Spring Bean 的创建过程（3）
继续上一篇Spring Bean的创建过程的解读,上一篇介绍了Spring在创建过程中doGetBean方法,在执行过程中会调用getSingleton方法并且设置一个lambda表达式,这个lamb ...