canvas图片转数据流失败

最新推荐文章于 2024-03-27 15:22:51 发布

玉面小白熊

最新推荐文章于 2024-03-27 15:22:51 发布

阅读量1.4k

点赞数

分类专栏： java 文章标签： canvas 跨域数据流图片处理

本文链接：https://blog.youkuaiyun.com/qq_15750707/article/details/80817650

版权

java 专栏收录该内容

3 篇文章

订阅专栏

在尝试使用canvas将微信页面上的图片转换为数据流进行OCR识别时，遇到了跨域错误。尝试了设置crossOrigin属性和配置CORS等方法无效。最终采取将图片路径发送到后台，由后台处理图片并转换为数据流，成功规避了跨域限制。提供了一段Java代码示例展示如何从URL获取图片的字节流。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想做ocr识别，前台微信页面上传图片，对图片内容进行处理。

本来的做法是在前台用canvas将图片转换成数据流，用ajax传到后台进行识别。

前台报错：

“Access to Image at '图片路径' from origin ' *****' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '*******' is therefore not allowed access.”

百度了一下这是同源策略引起的跨域调用错误，访问的图片在微信服务器上，和本身服务器不在一个域内。canvas本身也不支持跨域。

查了一下相关的解决方法，都不能解决我的问题，包括：

1.定义图片src属性；

2.添加 image.setAttribute("crossOrigin",'Anonymous');

3.配置CORS。

于是乎转换思路，将图片路径传到后台，从后台读取访问图片转换为数据流，解决了这个问题。

访问的时候要区分处理本地图片和互联网图片的方法是不一样的。

处理部分代码。

 
    /** 
 
       * 根据地址获得数据的字节流  
 
       * @param strUrl 
 
       * @return 
 
       */ 
 
      public static byte[] getImageFromNetByUrl(String strUrl){    
 
          try {    
 
              URL url = new URL(strUrl);    
 
              HttpURLConnection conn = (HttpURLConnection)url.openConnection();    
 
              conn.setRequestMethod("GET");    
 
              conn.setConnectTimeout(5 * 1000);    
 
              InputStream inStream = conn.getInputStream();//通过输入流获取图片数据    
 
              byte[] btImg = readInputStream(inStream);//得到图片的二进制数据    
 
              return btImg;    
 
          } catch (Exception e) {    
 
              e.printStackTrace();    
 
          }    
 
          return null;    
 
      } 
 
      /** 
 
       * 从输入流中获取数据  
 
       * @param inStream 
 
       * @return 
 
       * @throws Exception 
 
       */ 
 
      public static byte[] readInputStream(InputStream inStream) throws Exception{    
 
          ByteArrayOutputStream outStream = new ByteArrayOutputStream();    
 
          byte[] buffer = new byte[1024];    
 
          int len = 0;    
 
          while( (len=inStream.read(buffer)) != -1 ){    
 
              outStream.write(buffer, 0, len);    
 
          }    
 
          inStream.close();    
 
          return outStream.toByteArray();    
 
      }