在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. 高精度减法(C++实现)

    高精度减法 简介 用于计算含有超过一般变量存放不下的非负整数 高精度加法这个过程是模拟的小学竖式减法计算 注:在本文中,我们默认输入的第一个数为被减数,且被减数大于减数 原理基本上与高精度加法相同,仅 ...

  2. Markdown练习

    这是一级标题 这是二级标题 这是三级标题 这是无序列表1 这是无序列表2 有序1 有序2 重点 计网 1. 第一章 第一部分 1.概念.组成.功能和分类 1. 概念 计算机网络是互连的.自治的计算机的 ...

  3. 【分享汇总】25个主题分享，360°领略OpenHarmony最新技术版图

    2021年10月,开放原子开源基金会旗下开源项目 OpenAtom OpenHarmony (以下简称"OpenHarmony") 应邀参加华为2021 HDC 开发者大会,并组织 ...

  4. 简易table form梳理

    <!--      A:表格-table    <双标签,day3上午第一次接触>         作用:显示信息     一:table简易案例:         <tabl ...

  5. 2021.12.07 [TJOI2013]最长上升子序列（Treap+DP）

    2021.12.07 [TJOI2013]最长上升子序列(Treap+DP) https://www.luogu.com.cn/problem/P4309 题意: 给定一个序列,初始为空.现在我们将1 ...

  6. selenium模块无头化浏览器 设置不加载页面css、图片、js

    下面代码基于火狐浏览器,谷歌浏览器代码类似 from selenium import webdriver from selenium.webdriver.firefox.options import ...

  7. 安装与基本配置DHCP服务器

    一,安装DHCP服务器角色 1,打开[开始]→[管理工具]→[服务器管理器]→"仪表板"选项的[添加角色和功能],持续单机[下一步]按钮, 直至出现下图所示的"选择服务器 ...

  8. Linux-ls-cp-tr-命令拓展及通配符

    显示/etc目录下,以非字母开头,后面跟了一个字母以及其它任意长度任意字符的文件或目录 [11:23:02 root@centos8 ~]#ls -d /etc/[^[:alpha:]][[:alph ...

  9. 蓝桥杯Web：【功能实现】菜单树检索

    [功能实现]菜单树检索 背景介绍 实际工作中很多前端攻城狮都会遇到这样一个需求:在多级菜单树中模糊搜索匹配的菜单项,并显示出来. 本题需要在已提供的基础项目中使用 Vue.js 知识,实现对已提供的二 ...

  10. Vue3 与依赖注入

    Vue3 与依赖注入 本文写于 2021 年 2 月 19 日 在 React 中,我们可以通过 context 与 useContext 实现单例.注入--等诸多特性. 详细请看上一篇文章:如何利用 ...