阅读 322
记一次在线图片转base64出现的问题

记一次在线图片转base64出现的问题

需求:

系统里需要保存图片的功能,将图谱已图片的形式截图下载下来,考虑在线图片无法拿到图片资源,只好先转成base64,结果是在本地浏览器(chrome 90)正常;chrome 58版本报错

相关代码

let base64 = '';
const img = new Image();
img.src = url;
img.setAttribute("crossOrigin",'Anonymous')
let that = this;
img.onload = function() {
  console.log('img', img)
  const canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, img.width, img.height);
  const dataURL = canvas.toDataURL("image/png");
};
复制代码

报错信息

image.png

分析

  1. chrome 90生成base64正常,chrome 58报错,那就是非跨域问题;而且图片都是存在gofast服务器上
  2. img元素上已经设置了crossorigin属性

网上冲浪

跨域图片能正常裁剪(图片未转化成base64),应该满足三个条件:

  1. img元素中设置crossorigin属性
  2. 图片允许跨域,设置响应头Access-Control-Allow-Origin
  3. 使用js方式请求图片资源, 需要避免使用缓存,设置url后加上时间戳,或者http头设置Cache-Control为no-cache

主要原因是

  1. 如果使用跨域的资源画到canvas中,并且资源没有使用CORS去请求,canvas会被认为是被污染了, canvas可以正常展示,但是没办法使用toDataURL()或者toBlob()导出数据,见Allowing cross-origin use of images and canvas。 所以通过在img标签上设置crossorigin,启用CORS,属性值为anonymous,在CORS请求时不会发送认证信息,见HTML attribute: crossorigin
  2. 在启用CORS请求跨域资源时,资源必须允许跨域,才能正常返回,最简单的方式设置响应头Access-Control-Allow-Origin
  3. 图片已经通过img标签加载过,浏览器默认会缓存下来,下次使用js方式再去请求,直接返回缓存的图片,如果缓存中的图片不是通过CORS请求或者响应头中不存在Access-Control-Allow-Origin,都会导致报错。

修改

img.src = url + '?time=' + new Date().valueOf();
复制代码
文章分类
前端
文章标签