将在线图片转换成base64踩坑记录及静态资源跨域及缓存的处理

一、在线图片资源跨域的问题

　　解决方法：将“跨域图片资源”转换成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.

二、图片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 },

　　思路：

　　一、image的onload下载图片资源

　　二、利用canvas转换base64

　　三、避免跨域及缓存的坑