在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. <!--转换office时需要此配置 --> <identity impersonate="true" />

    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内容互转示例: ...

随机推荐

  1. 最强Postman替代品，国产软件Apifox到底有对牛？

    作为软件开发从业者,API 调试是必不可少的一项技能,在这方面 Postman 做的非常出色.但是在整个软件开发过程中,API 调试只是其中的一部分,还有很多事情 Postman 无法完成,或者无法高 ...

  2. OSPF MTU问题

    OSFP(开放式最短路径优先)链路状态协议,IGP 1.mtu 检测 链路俩段不匹配 假设双方的mtu不一致时 ospf建立如下: R1与R2交互hello报文,其中包含:目的IP地址:224.0.0 ...

  3. nacos 详细介绍(一)

    一.Nacos介绍 Nacos是SpringCloudAlibaba架构中最重要的组件. Nacos 是一个更易于帮助构建云原生应用的动态服务发现.配置和服务管理平台,提供注册中心.配置中心和动态 D ...

  4. [AcWing 26] 二进制中1的个数

    点击查看代码 class Solution { public: int NumberOf1(int n) { unsigned un = n; int res = 0; while (un) { re ...

  5. 修复Arch Linux和Manjaro Linux无法显示emoji的问题

    安装好Arch Linux或Manjaro Linux系统后默认没办法正常显示emoji,通常会变成方框或者带有unicode码的方块: 这是因为缺失字体以及相关的字体配置导致的. 当然也有一小部分应 ...

  6. 工程师姓什么很重要！别再叫我“X工”！！！

    关注「开源Linux」,选择"设为星标" 回复「学习」,有我为您特别筛选的学习资料~ 工程师之间都是这么互相打招呼的-- "高工,你设计图通过了么?" &quo ...

  7. Linux中几个正则表达式的用法

    开源Linux 长按二维码加关注~ 上一篇:盘点提高国内访问Github的速度的9种方案 正则表达式就是用于匹配每行输入的一种模式,模式是指一串字符序列.拥有强大的字符搜索功能.也非常方便的搜索过滤出 ...

  8. WSL与Windows环境共享

    Reference 更多cmd.exe帮助参考 cmd_helps WSL备份及windows Docker安装 WSL安装维护 在使用wsl时,总是需要执行windows的cmd,但是windows ...

  9. 微信小程序云开发如何实现微信支付，业务逻辑又怎样才算可靠

    今天打了几把永劫无间后,咱们来聊一聊用云开发来开发微信小程序时,如何实现微信支付,并且保证业务逻辑可靠. @ 目录 注册微信支付商户号 小程序关联商户号 业务逻辑 代码实现 注册微信支付商户号 点击& ...

  10. 自增特性，外键，级联更新与级联删除，表间关系，SELECT用法，GROUP BY

    自增特性 自动增长的作用: 问题:为数据表设置主键约束后,每次插入记录时,如果插入的值已经存在,会插入失败. 如何解决:为主键生成自动增长的值. 自动增长的语法: 字段名 数据类型 AUTO_INCR ...