电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: java进阶(九)------图片跨域显示---服务端获取图片显示在jsp中 [打印本页]

作者: look_w 时间: 2019-5-11 14:21 标题: java进阶(九)------图片跨域显示---服务端获取图片显示在jsp中

但是在jsp页面时还是需要给一个服务器的链接。

这种情况如果服务器允许跨域访问不起作用的话，还是会出现跨域问题。

比如在canvas中使用这个中转链接还是会报错:

var <span style="font-size:18px;">testpic</span>=http://123.12.12.12:8080/testpic;//这是中转服务器的图片地址，详见第八篇
   ctx.drawImage(listicon, (cvsWidth - ctx.measureText(name).width)/(dpr*2) - 17, 20, 12, 20);

         // 绘制png - 二维码
         var codeImg = new Image();
         codeImg.src = <span style="font-size:18px;">testpic</span>;
         codeImg.onload = function() {
            ctx.drawImage(codeImg, cvsWidth/(dpr*2) - 90, 360, 70, 70);
            $('.cloud-wrap').append(that.cvsToPng(cvs));
         }

// Canvas 转 Png
cvsToPng: function(cvs) {
      var img = $('<img class="cloud-img-share" crossOrigin="*">');
      img.crossOrigin = "*";
      img.attr('src', cvs.toDataURL('image/png'));

      return img;
}

报错信息:

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

这种情况下我们不能用外链的形式获取图片了，只能在服务端拿到图片后用base64形式传给图片给canvas来绘制。

base64图片工具介绍 | Base64 Encode/Decode Tool

支持 PNG、GIF、JPG、BMP、ICO 格式。
将图片转换为Base64编码，可以让你很方便地在没有上传文件的条件下将图片插入其它的网页、编辑器中。这对于一些小的图片是极为方便的，因为你不需要再去寻找一个保存图片的地方。
假定生成的代码为“data:image/jpeg;base64, .....”，那么你只需要全部复制，然后在插入图片的时候，地址填写这段代码即可。
CSS中使用：

background-image: url("data:image/png;base64,iVBORw0KGgo=...");

HTML中使用：

<img src="data:image/png;base64,iVBORw0KGgo=..." />

图片转换Base64，无线开发、HTML5、CSS3必备的工具，CSS DataURI Base64 工具。
将图片转换成base64编码的，在web网上一般用于小图片上，不仅可以减少图片的请求数量（集合到js、css代码中），还可以防止因为一些相对路径等问题导致图片404错误。

思路

把图片转成base64字符串后放到model容器中。jsp页面获取后再传到canvas中。

服务端代码

private InputStream testpic() throws IOException {
      String imgUrl = "https://www.baidu.com/img/bd_logo1.png";
      URL url = new URL(imgUrl);
      URLConnection conn = url.openConnection();
      return conn.getInputStream();
}
  model.addAttribute("testpic", Base64.encodeBase64String(IOUtils.toByteArray(testpic())))

jsp代码

var testpic='data:image/png;base64,${testpic}'//区别在这
   ctx.drawImage(listicon, (cvsWidth - ctx.measureText(name).width)/(dpr*2) - 17, 20, 12, 20);

         // 绘制png - 二维码
         var codeImg = new Image();
         codeImg.src = testpic;
         codeImg.onload = function() {
            ctx.drawImage(codeImg, cvsWidth/(dpr*2) - 90, 360, 70, 70);
            $('.cloud-wrap').append(that.cvsToPng(cvs));
         }

// Canvas 转 Png
cvsToPng: function(cvs) {
      var img = $('<img class="cloud-img-share" crossOrigin="*">');
      img.crossOrigin = "*";
      img.attr('src', cvs.toDataURL('image/png'));

      return img;
}

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)