在img标签上加上crossorigin=“anonymous”；
如果是图片地址是跨域网址，请将图片转换为base64格式；

源码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <title>html2canvas example</title>
  7.   </head>
  9.   <body>
  10.     <div id="view">
  11.       <input type="button" value="截图" onclick="takeScreenshot()" />
  12.       <img
  13.         src=""
  14.         alt=""
  15.         crossorigin="anonymous"
  16.         class="imgs"
  17.       />
  18.       <canvas id="myCanvas"></canvas>
  19.     </div>
  20.   </body>
  21.   <script src="https://unpkg.com/html2canvas@1.0.0-rc.7/dist/html2canvas.js"></script>
  22.   <script>
  23.     var c = document.getElementById("myCanvas");
  24.     var ctx = c.getContext("2d");
  25.     ctx.fillStyle = "#FF0000";
  26.     ctx.fillRect(0, 0, 80, 100);
  27.     function takeScreenshot() {
  28.       html2canvas(document.querySelector("#view")).then((canvas) => {
  29.         document.body.appendChild(canvas);
  30.       });
  31.     }
  32.     getBase64Image('https://profile.csdnimg.cn/B/1/0/3_qq_39045645',document.querySelector('.imgs'));
  34.     function getBase64Image(url, ref) {
  35.       var image = new Image();
  36.       image.src = url + "?v=" + Math.random(); // 处理缓存
  37.       image.crossOrigin = "*"; // 支持跨域图片
  38.       image.onload = function () {
  39.         var base64 = drawBase64Image(image);
  40.         ref.src = base64;
  41.       };
  42.     }

更多内容请见原文，原文转载自：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. 技术管理进阶——一线Leader怎么做？经理的速成宝典

    原创不易,求分享.求一键三连 本期培训材料关注公众号后回复:经理培训,获得 前段时间有个同学问我有没有一线Leader的速成培训课程,很好的问题,首先我们需要定义一下什么是小Leader: 所谓小Le ...

  2. Java高可用集群架构与微服务架构简单分析

    序 可能大部分读者都在想,为什么在这以 dubbo.spring cloud 为代表的微服务时代,我要还要整理这种已经"过时"高可用集群架构? 本人工作上大部分团队都是7-15人编 ...

  3. Django显示本地图片，注意事项

    1.在url.py文件中的配置 导入相关的库,在Python2.0后,要用re_path from django.urls import path,re_path from django.views. ...

  4. XCTF练习题---WEB---baby_web

    XCTF练习题---WEB---baby_web flag:flag{very_baby_web} 解题步骤: 1.观察题目,打开场景 2.观察题目内容,想想初始页面是哪个,再看看URL,尝试输入in ...

  5. FreeRTOS --（8）任务管理之创建任务

    转载自https://blog.csdn.net/zhoutaopower/article/details/107034995 在<FreeRTOS --(7)任务管理之入门篇>文章基本分 ...

  6. [题解] 春荔(cut) | 贪心

    题目大意 有一个长度为 \(n\) 的非负整数序列 \(a_i\),每次可以选择一段区间减去 \(1\),要求选择的区间长度 \(\in[l,r]\),问最少多少次把每个位置减成 \(0\). 不保证 ...

  7. 团队Beta2

    队名:观光队 链接 组长博客 作业博客 组员实践情况 王耀鑫 **过去两天完成了哪些任务 ** 文字/口头描述 学习 展示GitHub当日代码/文档签入记录 接下来的计划 完成短租车,页面美化 **还 ...

  8. Java注解Annotaton

    1.三种基本的Annotaton @Override : 限定某个方法,是重写父类方法 , 该注解只能用于方法 @Deprecated : 用于表示某个程序元素 ( 类 , 方法等 ) 已过时 @Su ...

  9. linux篇-linux iptables配置

    1 iptables默认系统自带 setup 2重启防火墙 /etc/init.d/iptables restart 3接受端口 Vi /etc/sysconfig/iptables -A INPUT ...

  10. Android.mk编译App源码

    在Andriod源码环境编译APP主要考虑如何引入第三方jar包和arr包的问题,初次尝试,步步是坑,这里给出一个模板: LOCAL_PATH := $(call my-dir) include $( ...