将在线图片转换成base64踩坑记录及静态资源跨域及缓存的处理
1、在线图片资源跨域的问题
解决方法:将“跨域图片资源”转换成base64后,用base64渲染img标签,这样完美解决问题;
如何将“跨域图片”转换成base64呢?原理很简单,将img绘制成canvas,再将canvas转换成base64的img流;
因为图片是跨域的,所以我们在转换过程中需要加一段代码:image.crossOrigin = "*";,用来处理跨域;
let image = new Image()
image.src = this.networkImg
image.crossOrigin = "*"
发现偶尔还是会报错:Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
2、图片url缓存
在这里能找到答案:https://stackoverflow.com/questions/46609800/canvas-crossorigin-anonymous-cors-chrile-mac-osx
If your images come from a different domain, and you want to be able to export the canvas content after you did draw these images, then you have no choice than loading them with the
crossOrigin
attribute.If you are really facing the linked bug, according to it, the proper fix is to always send the CORS headers from your server response, whether or not the request is made with the Origin header.
And a fast workaround is to avoid the cache, by appending a random query string in the image's src (
img.src = url + '?v=' + Math.random();
).
需要加个随机数防止缓存即可
let image = new Image()
image.src = this.networkImg + '?v=' + Math.random()
image.crossOrigin = "*"
我代码里的解决
insertImg () {
let _this = this
let image = new Image()
image.src = this.networkImg + '?v=' + Math.random()
image.crossOrigin = "*"
image.onload = function(){
let base64 = _this.getBase64Image(image)
_this.talkInfo.imageUrls.push(base64)
_this.networkImg = ''
}
},
getBase64Image (img) {
let canvas = document.createElement("canvas")
canvas.width = img.width
canvas.height = img.height
let ctx = canvas.getContext("2d")
ctx.drawImage(img, 0, 0, img.width, img.height)
let dataURL = canvas.toDataURL("image/png")
return dataURL
},
思路:
1、image的onload下载图片资源
2、利用canvas转换base64
3、避免跨域及缓存的坑
原文地址:https://www.cnblogs.com/goloving/p/12857575.html
- 一文学会用 Tensorflow 搭建神经网络
- 数据降维处理:PCA之特征值分解法例子解析
- 理解Eureka的自我保护模式
- 如何使用Feign构造多参数的请求
- 最简日志打印规范
- 碎片化 | 第四阶段-47-值栈细节问题-视频
- word2vec 模型思想和代码实现
- 碎片化 | 第四阶段-48-hibernate概述和配置-视频
- 【LEETCODE】模拟面试-357- Count Numbers with Unique Digits
- Python 爬虫 2 爬取多页网页
- 碎片化 | 第四阶段-49-hibernate之HQL查询操作-视频
- Spring Cloud各组件超时总结
- 总结Web应用中常用的各种Cache
- 碎片化 | 第四阶段-50-hibernate之Criteria和NavtiveSQL查询操作-视频
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 安防视频监控系统视频上云解决方案EasyCVR语音转发功能音频数据打包发送流程介绍
- 视频上云/安防视频融合平台/安防视频云服务EasyCVR通道播放界面出现样式重叠如何修正?
- 什么是MySQL数据库?看这一篇干货文章就够了!
- 折线图
- 雷达图
- Cypress系列(49)- invoke() 命令详解
- java线程池(三):ThreadPoolExecutor源码分析
- 社会工程学
- msf之木马程序
- 快速学习-Saturn用户的认证与授权
- 快速学习-Saturn创建作业
- 快速学习-Saturn作业编排
- 快速学习-NPM官方文档(英文版)
- 快速学习-Jenkins CLI QuickStart
- 快速学习-Jenkins CLI用户