html2canvas - 解决办法之图片跨域导致的截图空白

1. 后端支持:图片要是cdn上的地址,并且允许图片跨域,header头中设置应为

  Access-Control-Allow-Origin:  *

2. 前端配置

1     var opts = {
2           scale: scale, // 添加的scale 参数
3           canvas: canvas, //自定义 canvas
4           logging: false, //日志开关,便于查看html2canvas的内部执行流程
5           width: width, //dom 原始宽度
6           height: height,
7           useCORS: true // 【重要】开启跨域配置
8       };

使用

let shareContent = document.getElementById('XXX');

html2canvas(shareContent,opts).then(function(canvas) {
   //... 
})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

实战使用Axure设计App,使用WebStorm开发(3) – 构建页面架构

系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2)...

1847
来自专栏Wordpress专用主机|主题模板|必备插件

WORDPRESS个性化页面编辑插件推荐:ELEMENTOR

今天小编要推荐的是一款Wordpress个性化页面插件:Elementor。这款插件目前有近80万+的Wordpress用户在使用,广受好评。

6609
来自专栏日常学python

这次给大家带来复杂点的ajax请求该如何破?

公众号由于私人原因差不多一个月没有更新了,首先还是得感谢没有你们,没有取关我,很开心。其次我会在以下的两个月时间为大家输出高质量的文章,让你们能学到东西的同时,...

1203
来自专栏后端技术探索

最简单实现跨域的方法:使用nginx反向代理

跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。

1001
来自专栏张戈的专栏

原创插件:WordPress博客友好对话框+文章随机推荐滚动条插件(附代码版)

双 11 光棍节,我在博客发布了一篇给博客部署一个友好对话框的教程,用了几天感觉非常不错!就进一步折腾了一下,目前这个 js 已实现以下多种功能: 一、功能描述...

38612
来自专栏流星博客

WordPress内外链自动添加GO跳转

经常看到一些博客点击外链跳转到其他网站上的时候都会有一个跳转页面,很是漂亮。据说是有利于SEO,保护站点权重,不过个人只是觉得好看、高逼格便加上了 。网上相关的...

1484
来自专栏菩提树下的杨过

flex中使用swc实现更好的界面代码分离

前几天写过一篇"flash开发中如何实现界面代码分离",评论中 小-G 同学给出了更好的建议:swc ,今天试用了一下,果然比较embed swf来得更爽!同时...

1826
来自专栏葡萄城控件技术团队

实战使用Axure设计App,使用WebStorm开发(6) – 迈向后端

 系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2...

1778
来自专栏破晓之歌

vue的video插件vue-video-player

在线视频文件格式转化工具:https://cloudconvert.com/wmv-to-mp4

1673
来自专栏vue学习

18、vue-lazyload实现图片懒加载

vue-lazyload官网:https://github.com/hilongjw/vue-lazyload

611

扫码关注云+社区