iis服务器助手广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >html2canvas图片跨域问题图文详解
  • 679
分享到

html2canvas图片跨域问题图文详解

摘要

目录1.html写出来的样式2.利用html2canvas插件下载下来的图片3.解决方法总结今天遇到的一个需求,就是将自己写的html内容转化成图片,并下载到本地,功能实现了,但是有

今天遇到的一个需求,就是将自己写的html内容转化成图片,并下载到本地,功能实现了,但是有一个小问题,就是我们后端给我返回的图片,我下载的时候拿不到

1.html写出来的样式

2.利用html2canvas插件下载下来的图片

出现的问题:不显示 后端返回给我的图片

html2canvas图片跨域问题,是由于canvas自身的设计,加载的是本地的资源,对跨域资源默认是不加载的。

3.解决方法

 <img :src="sharedata.data.imageUrl" crossorigin="anonymous">
let downimg= ()=>{
  setTimeout(()=>{
    proxy.$nextTick(()=>{
      html2canvas(document.querySelector('#img'),{
        useCORS: true
      }).then(canvas => {
        var url = canvas.toDataURL()     //把canvas转成base64
        document.querySelector('#downimg').href = url
        document.querySelector('#downimg').download = "我的持仓报告.png"
        document.querySelector('#downimg').click()
      })
    })
  },2000)
}

重点:

1. img标签的crossorigin="anonymous"

2. useCORS: true

以上2个属性缺一不可

通过上面的两行代码就能解决html2canvas图片跨域问题

如果想要了解怎么将html内容转化成图片并进行下载,可参考

Vue将html内容转为图片并下载到本地

总结

到此这篇关于html2canvas图片跨域问题的文章就介绍到这了,更多相关html2canvas图片跨域内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: html2canvas图片跨域问题图文详解

本文链接: https://www.lsjlt.com/news/198171.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • html2canvas图片跨域问题图文详解
    目录1.html写出来的样式2.利用html2canvas插件下载下来的图片3.解决方法总结今天遇到的一个需求,就是将自己写的html内容转化成图片,并下载到本地,功能实现了,但是有...
    99+
    2023-03-02
    html2canvas图片跨域问题 html2canvas 图片跨域 html2canvas跨域
  • html2canvas图片跨域问题怎么解决
    这篇“html2canvas图片跨域问题怎么解决”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“html2canvas图片跨域...
    99+
    2023-07-05
  • 怎么解决canvas图片getImageData,toDataURL跨域问题
    这篇文章给大家分享的是有关怎么解决canvas图片getImageData,toDataURL跨域问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、首先,图片服务器需要配置Access-Control-All...
    99+
    2023-06-09
  • Spring Boot 如何解决富文本上传图片跨域问题
    目录Spring Boot 解决富文本上传图片跨域创建一个WebMvcConfig类创建一个Filter类,做页面跨域的处理springboot文件上传跨域前端后端Spring Bo...
    99+
    2024-04-02
  • thinkphp图片跨域不显示问题如何解决
    今天小编给大家分享一下thinkphp图片跨域不显示问题如何解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。首先,让我们了...
    99+
    2023-07-05
  • 如何解决html2canvas截图空白问题
    小编给大家分享一下如何解决html2canvas截图空白问题,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!资源下载地址插件下载地址:html2canvas下载地址使用方式项目使用的react组件开发方式。参照官方的说明文档...
    99+
    2023-06-09
  • 怎么解决画布图像getImageData和toDataURL跨域问题
    这篇文章主要介绍了怎么解决画布图像getImageData和toDataURL跨域问题的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么解决画布图像getImageData和t...
    99+
    2024-04-02
  • Vue如何解决跨域问题详解
    什么是跨域 跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议,端口,域名。只要这个3个中有一个不同就是跨域。 这里列举一个经典的列子: #协议跨域http://a....
    99+
    2024-04-02
  • fetch跨域问题的使用详解
    一、介绍 fetch 提供了一个获取资源的接口 (包括跨域)。 fetch 的核心主要包括:Request , Response , Header , Body 利用了请求的异步特性...
    99+
    2024-04-02
  • 前端跨域问题解决及七大跨域原理详解
    目录为什么跨域?跨域的时机?同域情况 && 跨域情况?解决跨域的方案JSONPWebSocketCorsNode接口代理NginxpostMessagedocumen...
    99+
    2024-04-02
  • Node中解决接口跨域问题详解
    目录前言CORSCORS 响应头部 - Access-Control-Allow-OriginCORS 响应头部 - Access-Control-Allow-HeadersCORS...
    99+
    2023-05-17
    Node cors解决接口跨域 Node 接口跨域
  • Nginx解决跨域问题
    目录 前言 一、跨域问题 1.什么是跨域  2.CORS 二、Nginx跨域处理 三.补充 前言 这几天出现了一个问题,我们中的一个A系统需要给B系统调用,造成了跨域问题。 一、跨域问题 1.什么是跨域 当一个请求url的协议、域...
    99+
    2023-09-02
    nginx 服务器 开发语言
  • 如何解决使用canvas绘图时遇到的跨域问题
    这篇文章主要介绍了如何解决使用canvas绘图时遇到的跨域问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。当在canvas中绘制一张外链图片时,我们会遇到一个跨域问题。示例...
    99+
    2023-06-09
  • Graphics2D 写图片中文乱码问题及解决
    目录Graphics2D 写图片中文乱码概述问题原因&解决Graphics2D 显示文字时乱码Graphics2D 写图片中文乱码 概述 由于工作的需求,需要往图片写字,写中...
    99+
    2024-04-02
  • AJAX请求以及解决跨域问题详解
    目录AJAX 介绍一.原生AJAX请求(GET)二.jQuery AJAX请求(GET 和POST)三.跨域问题的解决四.其他解决跨域问题方法总结AJAX 介绍 AJAX其实就是异步...
    99+
    2024-04-02
  • 如何使用Nginx解决跨域问题详解
    目录先来说一下什么是同源策略什么是跨域?跨域分类Nginx解决跨域问题解释1、Access-Control-Allow-Origin2、Access-Control-Allow-He...
    99+
    2024-04-02
  • canvas导出图片跨域的示例分析
    这篇文章将为大家详细讲解有关canvas导出图片跨域的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体如下:Uncaught DOMException: Failed to execute &#...
    99+
    2023-06-09
  • 解决Django cors跨域问题
    Django cors跨域问题 前后端分离项目中的跨域问题 即同源策略 同源策略:同源策略/SOP(Same origin policy)是一种约定,由 Netscape 公司 19...
    99+
    2024-04-02
  • 在LayUI图片上传中如何解决由跨域问题引起的请求接口错误
    这篇文章将为大家详细讲解有关在LayUI图片上传中如何解决由跨域问题引起的请求接口错误,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在LayUI图片上传中,解决由跨域问题...
    99+
    2024-04-02
  • ueditor富文本编辑器怎么实现跨域上传图片
    这篇文章主要介绍了ueditor富文本编辑器怎么实现跨域上传图片,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 在使用百度富文本编辑器上传...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作