在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时,出现图片丢失问题解决方案的更多相关文章

  1. 前端使用html2canvas截图,在canvas上绘制图片及保存图片

    1.使用html2canvas 存在的问题: 不同的机型绘制位置不同的问题. 这个主要因为Html动态设置了html的dpr.(dpr可以解决屏幕显示不了1pxborder和无法显示小于12px的文字 ...

  2. Long类型转json时前端js丢失精度解决方案

    一.问题背景 Java后端开发过程中,尤其是id字段,因数值太大,通过json形式传输到前端后,在js解析时,会丢失精度. 如果对精度丢失没有什么概念,可以看一个知乎的帖子,来感受一下:https:/ ...

  3. html2canvas.js——HTML转Canvas工具

    我们经常会遇上动态生成海报的需求,而在Web前端中,生成图片非Canvas莫属.但是在实际工作当中,为了追求效率,我们会不可避免地去使用一些JS插件,而html2canvas.js就是一款优秀的插件, ...

  4. PHP 将秒数转换成时分秒

    将秒数转换成时分秒,PHP提供了一个函数gmstrftime,不过该函数仅限于24小时内的秒数转换.对于超过24小时的秒数,我们应该怎么让其显示出来呢,例如 34:02:02 $seconds = 3 ...

  5. PowerDesigner中转换物理模型时的命名转换

    原文:PowerDesigner中转换物理模型时的命名转换 最近在使用PowerDesigner建模数据库,在使用中积累了一些遇到的问题和解决办法,记录下来,希望对遇到同样问题的朋友有所帮助. 早 期 ...

  6. &lt;!--转换office时需要此配置 --&gt; &lt;identity impersonate=&quot;true&quot; /&gt;

    1.需要对Office 进行操作时 ,添加权限  <!--转换office时需要此配置 --> <identity impersonate="true" /> ...

  7. 在jQuery中使用canvas时遇到的问题

    正常的情况下一般在JavaScript中使用canvas,会用到如下代码: var canvas=document.getElementById("canvas"); var co ...

  8. spring boot @ResponseBody转换JSON 时 Date 类型处理方法,Jackson和FastJson两种方式,springboot 2.0.9配置fastjson不生效官方解决办法

    spring boot @ResponseBody转换JSON 时 Date 类型处理方法 ,这里一共有两种不同解析方式(Jackson和FastJson两种方式,springboot我用的1.x的版 ...

  9. 三:C#对象转换Json时的一些高级(特殊)设置;

    导航目录: Newtonsoft.Json 概述 一:Newtonsoft.Json 支持序列化与反序列化的.net 对象类型:    二:C#对象.集合.DataTable与Json内容互转示例: ...

  10. PHP函数gmstrftime()将秒数转换成天时分秒

    http://yangjunwei.com/a/930.html PHP函数gmstrftime()将秒数转换成天时分秒   一个应用场景需要用到倒计时的时分秒,比如新浪微博授权有效期剩余: 7天16 ...

随机推荐

  1. maven建立本地仓库

    maven 建立本地仓库 博客分类: java,maven,nexus   前面我讲到为什么要使用 Maven, Maven 的安装,以及 如何与 IDE 集成等,前面的介绍可以认为是一个 Hello ...

  2. easy-ui 小白进阶史(二):操作数据,easy-ui操作

    easy-ui的操作及交互: Html: @using LangBo.Facade; @using LangBo.DataDefine; @using System.Threading.Tasks; ...

  3. JVM-程序编译与代码晚期(运行期)优化

    晚期(运行期)优化 1.为了提高热点代码的执行效率,在运行时,虚拟机将会把这些代码编译成与本地平台相关的机器码,并进行各种层次的优化,完成这个任务的编译器称为即时编译器(Just In Time,JI ...

  4. NOIP模拟赛-时间与空间之旅

    题目描述 公元22××年,宇宙中最普遍的交通工具是spaceship.spaceship的出现使得星系之间的联系变得更为紧密,所以spaceship船长也成了最热门的职业之一.当然,要成为一名出色的船 ...

  5. 【转】浅析Windows编程的剪贴板

    摘要: 本文对Windows剪贴板机制作了深入.全面的阐述,具体内容包括:文本.位图.DSP.自定义格式剪贴板的使用和多数据项和延迟提交技术. 关键词: VC++6.0: 剪贴板机制:数据格式:延迟提 ...

  6. 剖析Qt的事件机制原理

    版权声明 请尊重原创作品.转载请保持文章完整性,并以超链接形式注明原始作者“tingsking18”和主站点地址,方便其他朋友提问和指正. QT源码解析(一) QT创建窗口程序.消息循环和WinMai ...

  7. 【小梅哥FPGA进阶教程】第九章 基于串口猎人软件的串口示波器

    九.基于串口猎人软件的串口示波器 1.实验介绍 本实验,为芯航线开发板的综合实验,该实验利用芯航线开发板上的ADC.独立按键.UART等外设,搭建了一个具备丰富功能的数据采集卡,芯航线开发板负责进行数 ...

  8. vue-lazyload的使用

    1.下载依赖 npm install vue-lazyload --save 2.引入 import Vue from 'vue' import App from '@/App' import Vue ...

  9. vi/vim 基本使用方法

    vi/vim 基本使用方法本文介绍了vi (vim)的基本使用方法,但对于普通用户来说基本上够了!i/vim的区别简单点来说,它们都是多模式编辑器,不同的是vim 是vi的升级版本,它不仅兼容vi的所 ...

  10. Python3 安装 PyQt5 -pycharm 环境搭建

    执行命令: pip3 install PyQt5 PyQt5+python3+pycharm开发环境配置   1.下载PyQt 官方网站:http://www.riverbankcomputing.c ...