html2canvas截图时不能使用跨域图片的解决方案

解决方案为三个地方，三个地方缺一不可：
1、html2canvas.js源码中修改两个地方：(如果是Vue项目在：node_modules—html2canvas—dist—html2canvas.js)

 case 2:Logger.getInstance(this.id).debug("Added image " + key.substring(0, 256));return [4 /*yield*/, new Promise(function (resolve, reject) {var img = new Image();img.onload = function () { return resolve(img); };img.onerror = reject;//ios safari 10.3 taints canvas with data urls unless crossOrigin is set to anonymousif (isInlineBase64Image(src) || useCORS) {// img.crossOrigin = 'anonymous';img.crossOrigin = '';  // 第一个修改的地方}// img.src = src;// img.src = src;  // ！！！第二个修改的地方if(src.indexOf('data:image')>-1){ // 图片地址后加时间 base64图片不变// base64 图片操作img.src = src;}else{//path 图片操作img.src = src+"?"+new Date().getTime();}if (img.complete === true) {

上面两个地方修改之后还是不可以的，还有最后一步：

html2canvas(this.$refs.imageTofile, {backgroundColor: null,logging: true,useCORS: true // 第三步添加的地方}).then((canvas) => {。。。})

好了大功告成了！耗费我两个小时的时间百度加尝试得到的结果，如果对你有用请点赞呦

提示：如果小伙伴们用的是火狐浏览器，应该只设置最后一个属性就可以了，但是其他浏览器就不能用哦

html2canvas截图时不能使用跨域图片的解决方案相关推荐

h5跨域访问图片_网页保存为图片及高清截图的优化 | canvas跨域图片配置
本次技术调研来源于H5项目中的一个重要功能需求:实现微信长按网页保存为截图. 这里有个栗子(请用微信打开,长按图片即可保存):3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能,常见于H ...
网页保存为图片及高清截图的优化 | canvas跨域图片配置
本次技术调研来源于H5项目中的一个重要功能需求:实现微信长按网页保存为截图. 这里有个栗子(请用微信打开,长按图片即可保存):3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能,常见于H ...
使用自开发的代理服务器解决 SAP UI5 FileUploader 上传文件时遇到的跨域访问错误试读版
一套适合 SAP UI5 初学者循序渐进的学习教程作者简介 Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今.Jerry 是 SAP 社区导师,S ...
跨域图片使用toDataURL遇坑记。（最终还是解决了）
这两天接到一个需求,需要做一个图片裁剪功能.找到了cropper.js,使用起来算是顺手,在做到将截好的图片以base64的形式上传保存的时候,突然遇到了一个之前没有碰到过的问题,没错就是:图片跨域问 ...
svg转成jpg/png图片跨域图片
svg转成jpg/png图片,svg含跨域图片基本思路: svg: svg效果: 转成jpg/png: base64串显示效果由于svg上含有跨域图片,图片没显示出来,所以最终处理结果: 解决跨域 ...
uniapp前端向后端发送请求时，出现跨域问题的解决方法与原理
h5代理打开h5页面的端口是8081,实际访问的后端端口是8021 修改方式: 在manifest里的源码模式中,添加如下代码: 调用接口的地方这样写: 原理: 直接访问8021端口时,显示跨域问题 ...
LiveNVR拉流视频流媒体平台如何解决JS|axios调用接口时遇到的跨域问题
LiveNVR拉流视频流媒体平台如何解决JS|axios调用接口时遇到的跨域问题 1.JS调用遇到跨域解决示例 2.axios请求接口遇到跨域问题 2.1.post请求 2.2.get请求 3.RTS ...
vue 跨域图片下载
在项目中遇到一个问题,后端传回来的图片可以查看,但是下载时会提示跨域. 再搜索了多种办法下,发现要提前把图片转为base64,在进行下载,就可以成功了. 具体方法如下. // 下载图片insertIm ...
canvas跨域图片报Tainted canvases may not be exported.
canvas跨域图片报Tainted canvases may not be exported.解决办法--在路径后面添加时间戳 img.src = url + "?v=" + n ...

html2canvas截图时不能使用跨域图片的解决方案

html2canvas截图时不能使用跨域图片的解决方案相关推荐

最新文章

热门文章

html2canvas截图时 不能使用跨域图片的解决方案

html2canvas截图时 不能使用跨域图片的解决方案相关推荐

最新文章

热门文章

html2canvas截图时不能使用跨域图片的解决方案

html2canvas截图时不能使用跨域图片的解决方案相关推荐