在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. Codeforces Round #752 (Div. 2) A B C

    Problem - A - Codeforces Problem - B - Codeforces Problem - C - Codeforces A. Era 每个a[i] - i 表示的是当前a ...

  2. OA办公软件篇（二）—权限管理

    权限管理的背景 权限管理的作用 迭代历程 关键名词释义 权限管理模型 具体实现 写在最后   权限管理的背景 在OA办公软件篇(一)-组织架构一文中,我们说到组织架构是软件系统的权限体系的重要搭建依据 ...

  3. JavaSE前期准备1

    历史(建议了解即可) 一.1990年,美国Sun公司的"Stealth计划"(后改名为"Green计划")目标设置在家用电器等小型系统的程序语言,准备应用在电视 ...

  4. Flex 的 多种对齐属性

    1. html 结构 <div id="container"> <div class="item item-1"> <h3> ...

  5. Spring (IOC)配置

    就是这个东西,里面的不同标签,所代表的不同含义 beans  里面有很多的bean  ,每一个bean都是容器里面的一个对象 1.别名alias  (另外的一个名字) XML <alias na ...

  6. Excel文件读写操作1(xls)

    一.Python-Excel常用的库:xlrd(read).xlwt(write).xlutils.openpyxl 1.xlrd  读取Excel文件,支持 .xls 和 .xlsx 格式. 2.x ...

  7. InnoDB的逻辑存储结构是什么，表空间组成包括哪些？

    一.表空间 在InnoDB中我们创建的表还有对应的索引数据都存储在扩展名为.ibd 的文件中,这个文件路径可以先通过查mysql变量datadir来得到,然后进入对应的数据库名目录,会看到很多ibd, ...

  8. SpringData JPA接口总结

    1 JPA 1.1 整体概念 JPA:Java Persistence API,就是java持久化api,是SUN公司推出的一套基于ORM的规范. ORM呢:Object-Relational Map ...

  9. 【openstack】cloudkitty组件，入门级安装（快速）

    @ 目录 前言 架构 安装 配置 启动 检索并安装 CloudKitty 的仪表板 前言 什么是CloudKitty? CloudKitty是OpenStack等的评级即服务项目.该项目旨在成为云的退 ...

  10. 如何使用Docker构建前端项目

    原文链接 Docker单独部署前端项目和Node项目是非常便捷的,在这里分享一下Docker的使用,主要聊聊它的部署实践.(我是window10专业版安装Docker) Docker Docker是一 ...