使用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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~