在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. 安全市场迎来新挑战，FinClip助力车联网数据安全

    随着汽车工业的发展与电子技术的进步,智能汽车迎来了前所未有的蓬勃发展,随着汽车电动化.网联化.智能化交融发展,车辆运行安全.数据安全和网络安全风险交织叠加,安全形势更加复杂严峻......

  2. windows安装rabbitmq踩坑实录

    最近学习springcloud消息总线需要用到rabbitmq,然后安装的时候踩了一些坑,记录如下: 首先安装rabbitmq之前需要先安装erlang,因为rabbitmq服务端使用erlang写的 ...

  3. JDK7u21反序列链学习

    JDK7u21 1.前置知识 jdk7u21是一条不依赖CommonsCollections库依赖的,看利用链所有知识其实跟CommonsCollections也有重复,我们来学习一下以前没学过的类或 ...

  4. 在网站copy时自带的版权小尾巴以及“复制代码“，可以怎么实现

    前言 每天网上的博客各个领域都会涌现新文章,有时候看到感兴趣的知识就想把某段文字 copy下来 摘录下来,等有时间后慢慢品味 在部分网站上,如果只是复制少量文字,并没有什么不同.但是当我们复制的文字多 ...

  5. 渗透测试中为什么https抓包是明文传输？

    网站用的是https抓包是明文传输,为什么能看到https报文的明文? https其实就是 http + SSL/TLS 两种协议的合体.http协议是应用层协议,而SSL/TLS是传输层协议. 那问 ...

  6. Java语言学习day37--8月12日

    今日内容介绍1.List接口2.Set接口3.判断集合唯一性原理 ###01List接口的特点 A:List接口的特点: a:它是一个元素存取有序的集合. 例如,存元素的顺序是11.22.33.那么 ...

  7. MySQL 数据库备份脚本

    MySQL 数据库备份脚本 #!/bin/bash # 数据库连接信息 DB_HOST="127.0.0.1" DB_PORT="3306" DB_USER=& ...

  8. 2. flddler响应显示乱码问题解决方案

    Fiddler是一款强大Web调试工具,它能记录所有客户端和服务器的HTTP请求. Fiddler启动的时候,默认IE的代理设为了127.0.0.1:8888,而其他浏览器是需要手动设置.但是一开始使 ...

  9. React ant table 用 XLSX 导出excel文件

    近期做了一个react ant design 的table转换成excel 的功能 总结下 首先我们会自己定义下 antdesign 的table的columns其中有可能有多语言或者是render方 ...

  10. BUUCTF-Web:[GXYCTF2019]Ping Ping Ping

    题目 解题过程 1.题目页面提示?ip=,猜测是让我们把这个当做变量上传参数,由此猜想是命令注入 2.用管道符加上linux常用命令ls(windwos可以尝试dir)试试 所谓管道符(linux)的 ...