在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. 帝国CMS怎样删除清空数据库记录?

    我用的帝国CMS,删除已经发表的文章和栏目后,后面新发的栏目和文章ID并不会重新从1开始,而是接着已经删除的文章和栏目ID,那么,怎样让后面发的文章和栏目ID重新从1开始呢? 首先,做任何重要修改前先 ...

  2. Postman中文版客户端

    "新冷战"蔓延到生产力工具 前端时间,著名 UI 设计软件 Figma 宣布制裁大疆! 这不仅让中国的互联网从业者纷纷一头冷汗:今天是 Figma,明天会是什么?今天是大疆,明天会 ...

  3. 入门学习SpringCloud

    今天趁着空余时间,看了一丁点狂神SpringCloud的视频.学习微服务及架构相关知识,明天再学习系列视频的剩下部分,部署第一个SpringCloud练习. 同时趁着晚上课后大家有时间组织了小型会议, ...

  4. 原生的ajax请求

    原生ajax请求的步骤: get 请求: 1,创建一个xhr变量 var xhr=new XMhttpRequest(); 2,设置请求方式和请求地址 xhr.open('url','http//19 ...

  5. Codeforces Round #704 (Div. 2), problem: (C) Maximum width还是要多学习

    Problem - C - Codeforces 看清题目要求, 最重要部分在第二段. 大佬最后给出的代码果然简单, 思路简单化, 未必非要把答案在一个大括号里全部完成, 两个指针同时跑,中间加了一堆 ...

  6. vue项目中cookie的使用

    Vue使用cookie和session 1:cookie和session 为了防止数据运输或存储终端,特地设置了cookie和session,他们其实都是将数据存储当地. cookie数据保存在客户端 ...

  7. python 本地配置文件库 Dynaconf 简介

    [前言] 在项目中经常会遇到以下几种需要用到配置文件的场景: 相同的配置参数用在不同的代码中,如果需要调整,则需要手动将各个使用到的地方都相应调整. 密码等信息不想硬编码在项目文件中. 配置文件的格式 ...

  8. C++实例2--职工管理系统

    职工管理系统 1.  头文件 1.1 workerManager.h 系统类 1 #pragma once // 防止头文件重复包含 2 #include<iostream> // 包含输 ...

  9. 红旗 Linux 桌面操作系统11来了:支持国产自主CPU,全新UI风格设计,兼容面广...

    链接:https://reurl.cc/g8ke9X 红旗Linux桌面操作系统11将于1月10日开放预览版的下载,新版本具有良好的硬件兼容,支持多款国产自主CPU品牌,同时还具有丰富的外设支持及海量 ...

  10. iptables系列教程(二)| iptables语法规则

    一个执着于技术的公众号 iptables 命令基本语法 " iptables [-t table] command [链名] [条件匹配] [-j 目标动作] 以下是对 iptables 命 ...